javascript - 如何仅更新 DIV 的文本而不更新任何其他子节点

Question

<div id='container'>
  This is some text
  <span> more text </span>
</div>

如何只更新文本部分（“这是一些文本”）而不影响“跨度”？

Answer 1

var childNodes = elem.childNodes;
for (var i = 0; i < childNodes.length; i++) {
    var child = childNodes[i];

    if (child.nodeName == "#text") {
      elem.removeChild(child);
      i--;
    }
}

在 IE7 中工作（这就是我得到的）。您可能需要针对不同的浏览器调整nodeName检查，但总体概念是一样的：不检查firstChild，通过nodeName属性检查节点的类型。

Answer 2

纯javascript解决方案

演示

 var fieldNameElement = document.getElementById('container');

fieldNameElement.removeChild(fieldNameElement.firstChild);
var newText = document.createTextNode("New Text");
fieldNameElement.insertBefore(newText , fieldNameElement.firstChild);

或者

jQuery

演示

$('#container').each(function(i,el) {
    el.firstChild.data = 'New Title Goes Here';
});

Answer 3

使用段落标签将其格式化并使用javascript来更改段落标签的innerHTML是最简单的。这是仅更改该文本的最简单和最短的方法。

<div id='container'>
<p id="text">This is some text</p>
<span> more text </span>
</div>