如何更改textContent o只是文本而不更改其余内容

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

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 2

没有“只是文本”节点;你可以有不止一个：

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