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

Question

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

如何在不影响“span”的情况下只更新文本部分（“这是一些文本”）？

Answer 1

纯javascript溶液

DEMO

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

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

或

Jquery的

DEMO

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

Answer 2

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 3

用段落标签格式化它最简单，并使用javascript来更改段落标记的innerHTML。这是仅改变文本的最简单和最短的方式。

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