web-dev-qa-db-ja.com

JavaScriptを使用してHTML <span>のコンテンツを設定する

Webページで、整数値を提供するWebServiceを呼び出しています。この値をテキストブロックで表示する必要があります。現在、HTML _<span>_を使用しています。

これまでのところ、スパンに価値を置く2つの方法を見つけました。 innerText()はIE独自の方法であり、innerHTML()は非標準準拠の方法ですが、広くサポートされています。

Javascriptの_<span>_と_</span>_の間にテキストを設定する正しい標準準拠の方法は何ですか？

javascriptdhtmlhtml
53
Brian Beckett

これは標準に準拠しており、クロスブラウザで安全です。

例：http://jsfiddle.net/kv9pw/

var span = document.getElementById('someID');

while( span.firstChild ) {
    span.removeChild( span.firstChild );
}
span.appendChild( document.createTextNode("some new content") );
58
user113716

最新のブラウザでは、textContentプロパティを設定できます。 Node.textContent を参照してください：

var span = document.getElementById("myspan");
span.textContent = "some text";
43
robinst

JQueryなどのJavaScriptライブラリを使用せずにこれを行うには、次のようにします。

var span = document.getElementById("myspan"),
    text = document.createTextNode(''+intValue);
span.innerHTML = ''; // clear existing
span.appendChild(text);

JQueryを使用する場合、これは次のとおりです。

$("#myspan").text(''+intValue);
19
Brian Donovan

Maximally Standards Compliantの方法は、必要なテキストを含むテキストノードを作成し、スパンに追加することです（現在の既存のテキストノードを削除します）。

私が実際に行う方法は、jQueryの.text()を使用することです。

1
chaos