Question

我有以下HTML元素：

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

我的想法是取代＆＃34;一些文字＆＃34;用＆＃34;其他一些文字＆＃34;当有人点击＆＃34;来改变＆＃34;跨度。所以我的第一次尝试是：

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

......但是，我已经学会了from my mistakes这不仅会覆盖文本，还会覆盖嵌套在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>"

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

Answer 1

获取textNode

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

4 个答案: