如何僅更新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>