JavaScriptでスパン要素のテキストを変更する方法

スパンがある場合は、次のように言います。

<span id="myspan"> hereismytext </span>

JavaScriptを使用して「hereismytext」を「newtext」に変更するにはどうすればよいですか？

最新のブラウザでは、次を使用する必要があります。

document.getElementById("myspan").textContent="newtext";

古いブラウザは知らないかもしれませんがtextContent、innerHTML新しいテキストがユーザー入力である場合にXSS脆弱性が導入されるため、使用することはお勧めしません（詳細については、以下の他の回答を参照してください）。

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

innerHTMLの使用は推奨されていません。代わりに、textNodeを作成する必要があります。このようにして、あなたはあなたのテキストを「束縛」しており、少なくともこの場合、XSS攻撃に対して脆弱ではありません。

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

正しい方法：

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

この脆弱性の詳細： クロスサイトスクリプティング（XSS）-OWASP

2017年11月4日編集：

@mumushの提案に従ってコードの3行目を変更しました：「代わりにappendChild（）;を使用」。
ところで、@ Jimbo Jonnyによると、レイヤーによるセキュリティを適用することにより、すべてをユーザー入力として扱う必要があると思います。そうすれば、驚きはありません。

document.getElementById('myspan').innerHTML = 'newtext';

編集：これは2014年に書かれました。おそらくIE8についてもう気にせず、の使用を忘れることがありますinnerText。使用textContentして、それで終わりです。

あなたがテキストを提供しているのがあなたであり、テキストの一部がユーザー（またはあなたが制御できない他のソース）によって提供されていない場合、設定innerHTMLは受け入れられるかもしれません：

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

ただし、他の人が指摘しているように、テキスト文字列の一部のソースでないinnerHTML場合、最初にテキストを適切にサニタイズするように注意しないと、を使用するとXSSなどのコンテンツインジェクション攻撃を受ける可能性があります。

ユーザーからの入力を使用している場合、ブラウザー間の互換性を維持しながら安全に入力する方法の1つを次に示します。

var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';

FirefoxはサポートされておらずinnerText、IE8はサポートされtextContentていないため、ブラウザー間の互換性を維持するには、両方を使用する必要があります。

そして、可能であればリフロー（が原因innerText）を回避したい場合：

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}

私は使用Jqueryしていますが、上記のどれも役に立たなかったので、なぜかわかりませんが、これはうまくいきました：

 $("#span_id").text("new_value");

ここに別の方法があります：

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

innerTextプロパティは、Safari、Google Chrome、およびMSIEによって検出されます。Firefoxの場合、標準的な方法はtextContentを使用することでしたが、バージョン45以降、innerTextプロパティが追加されました。このソリューションでは、ブラウザがこれらのプロパティのいずれかをサポートしているかどうかをテストし、サポートしている場合は「newtext」を割り当てます。

ライブデモ：こちら

上記の純粋なJavaScriptの回答に加えて、jQuery テキストメソッドを次のように使用できます。

$('#myspan').text('newtext');

回答を拡張してspanまたはdiv要素のhtmlコンテンツを取得/変更する必要がある場合は、次のようにします。

$('#mydiv').html('<strong>new text</strong>');

参照：

.text（）：http : //api.jquery.com/text/

.html（）：http : //api.jquery.com/html/

メソッドが指定されたセレクターを持つ最初の要素を返すため、「myspan」IDが一意であると想定して、querySelector（）メソッドを使用することもできます。

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

他の回答と同様に、innerHTMLとinnerTextは推奨されません。textContentを使用することをお勧めします。この属性は十分にサポートされており、これを確認できます：http : //caniuse.com/#search=textContent

document.getElementById("myspan").textContent="newtext";

これにより、ID myspanを持つdom-nodeが選択され、テキストコンテンツが次のように変更されます。new text

できるよ

 document.querySelector（ "[Span]"）。textContent = "content_to_display"; 

このスパンについて

<span id="name">sdfsdf</span>

あなたはこのように行くことができます：-

$("name").firstChild.nodeValue = "Hello" + "World";