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

Question

我有以下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>"

...但除了复杂之外，因为这是真实代码的最小化示例，我认为它是有史以来最不优雅的解决方案，所以我想学习正确的方法。

Answer 1

只需获取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> 

Answer 2

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

<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";
}

Answer 3

或者您可以用新的节点替换第一个文本节点：

 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> 

Answer 4

对于非常简单的方法：

 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>