在包含其他標記的標記中將一個文本替換為另一個文本

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>