javascript - DIVのテキストのみを更新し、他の子ノードは更新しない方法

Question

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

「スパン」に影響を与えずに、テキストセクション（「これは一部のテキストです」）のみを更新するにはどうすればよいですか？

Answer 1

純粋な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 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>