在包含其他标签的标签中，将一个文本替换为另一个文本

Replace one text with another in a tag containing other tags

本文关键字：标签 一个 文本替换 文本 另一个 其他 包含      更新时间：2023-09-26

我有以下HTML元素：

<p id="myP">Some text<span onclick="myFunc()"> to change</span></p>

我的想法是在有人单击"更改"范围时将"一些文本"替换为"其他一些文本"。所以我的第一次尝试是：

function myFunc(){
    var myP = document.getElementById("myP");
    myP.innerText = "Some other text";
}

。但是，我已经从错误中吸取了教训，这不仅会覆盖文本，还会覆盖嵌套在 p 中的 span 元素。因此，使用上次的学习，我尝试创建一个文本节点：

function myFunc(){
    var myP = document.getElementById("myP");
    myP.appendChild(document.createTextNode("Some other text"));
}

然而，这显然是错误的，因为它会附加文本而不是替换它。我应该如何编写我的 JavaScript 函数以获得一些文本与其他一些文本的纯粹替换，但不会影响嵌套范围？

我知道这似乎是一个基本问题，但我是一个完全的初学者，还不知道如何处理 HTML 对象。提前致谢

注意我认为我可以简单地做到这一点：

myP.innerText = "Some other text<span onclick="myFunc()"> to change</span>"

。但除了因为这是一个最小化的例子而变得复杂之外，我认为这是有史以来最不优雅的解决方案，所以我想学习正确的方法。

只需获取 textNode

function myFunc(){
  var myP = document.getElementById("myP").firstChild;
  myP.nodeValue = "Some other text";
}
<p id="myP">Some text<span onclick="myFunc()"> to change</span></p>

为什么不使用另一个元素来实现它呢？

<p><span id="to-change">Some text</span> <span onclick="myFunc()">to change</span></p>

function myFunc(){
    document.getElementById("to-change").innerText = "Some other text";
}
或者

，您可以将第一个文本节点替换为新节点：

function myFunc() {
    var myP = document.getElementById("myP");
    myP.replaceChild(document.createTextNode("Some other text"), myP.childNodes[0]);
}
<p id="myP">Some text<span onclick="myFunc()"> to change</span></p>

对于真正简单的方法：

function myFunc(){
    var myP = document.getElementById("myP");
    var cn = myP.childNodes[0]; // where cn.nodeType == 3 (text node)
    cn.textContent = "Some other text";
}
<p id="myP">Some text<span onclick="myFunc()"> to change</span></p>

相关文章：