如何更改textContent或仅<span>更改</span>一个文本<span>而不更改其余内容</span>

Question

我想使用以下复选框更改跨度的文本：

 function checkChange(){ document.getElementById("span1").textContent="red";} 

 <span id="span1" style="color:darkolivegreen;font-weight:bold"> <input id="check1" type='checkbox' onclick="checkChange();">blue </span> 

结果是这样的：<span style ='color：darkolivegreen; font-weight：bold'> red </ span>“，该复选框消失了。与innerHTML相同。如何更改文本而不影响我内部的其他字段跨度

Answer 1

没有“仅文本”节点； 您可以有多个：

<span id="span1" style="color:darkolivegreen;font-weight:bold">
    first text node in span
    <input id="check1" type='checkbox' onclick="checkChange();">
    second text node in span
</span>

看看此JS代码显示的内容：

var sp = document.getElementById("span1");
for (var n = 0 ; n <sp.childNodes.length; n++){
    if (sp.childNodes[n].nodeType === Node.TEXT_NODE) {
        console.log("found text \""+sp.childNodes[n].nodeValue+"\" in node "+n)
    }
}

在节点0中找到文本“ span中的第一个文本节点”

在节点2中找到了文本“ span中的第二个文本节点”

因此，首先需要找到要更改的节点，然后可以对其进行更改。

下面的代码更改每个文本节点的值：

var sp = document.getElementById("span1");
for (var n = 0 ; n <sp.childNodes.length; n++){
    if (sp.childNodes[n].nodeType === Node.TEXT_NODE) {
        sp.childNodes[n].nodeValue = "new text node value";
    }
}

请注意，我在下面的文本中添加了换行符以提高可读性； 这些换行实际上是文本节点值的一部分。

 <span id="span1" style="color: darkolivegreen; font-weight: bold;"> new text node value <input id="check1" type="checkbox" onclick="checkChange();"> new text node value </span> 

到目前为止仅在Chrome中进行了测试...

Answer 2

 function checkChange(){ var elem = document.getElementById("span1"); for (var i = 0; i < elem.childNodes.length; i++) { var curNode = elem.childNodes[i]; if ((curNode.nodeValue ? curNode.nodeValue : "").match(/.*blue.*/)) { curNode.nodeValue = "red"; } } } 

 <span id="span1" style="color:darkolivegreen;font-weight:bold"> <input id="check1" type='checkbox' onclick="checkChange();"> blue </span> 

Answer 3

将您的html更改为如下所示：

<span id="span1" style="color:darkolivegreen;font-weight:bold">
    <input id="check1" type='checkbox' onclick="checkChange();">
    <span id="2">blue</span>
</span>

和您的JavaScript到这样的事情：

function checkChange(){
    document.getElementById("span2").textContent="red";
}