JavaScriptで要素のテキストを、取得・設定する方法についてまとめました。
取得
① textContentプロパティ（HTML文字列を含まない場合）
② innerHTMLプロパティ（HTML文字列を含む場合）
設定
③ textContentプロパティ（HTML文字列を含まない場合）
④ createElement、createTextNodeメソッド（HTML文字列を含む場合）
目次
要素のテキストを取得
① textContentプロパティ（HTML文字列を含まない場合）
取得するテキストに、HTML文字列を含まない、またはHTML文字列が含まれていても無視して取得する場合は、textContentプロパティ を使用します。
書式：element.textContent
次の例では、div要素（id = text-msg) のテキストを取得しています。
html
|
1 |
<div id="text-msg">HTMLを含まない文字列</div> |
javascript
|
1 2 3 4 |
// 要素への参照を取得 var textMsg = document.getElementById('text-msg'); // コンソールにテキストを表示 console.log(textMsg.textContent); |
この例では、コンソールに、”HTMLを含まない文字列” と表示されます。
では、次のように文字列の中にHTMLが含まれる場合は、どのように取得できるでしょうか？
|
1 2 3 4 5 |
<div id="text-msg"> <p>HTMLを含む文字列</p> <button>ボタン要素</button> <p>この場合はどのように取得されるでしょうか？</p> </div> |
先ほどと同様のjavascriptで取得すると、以下の文字列が取得できます。
|
1 2 3 |
HTMLを含む文字列 ボタン要素 この場合はどのように取得されるでしょうか？ |
このように、指定した要素配下のHTML要素が省かれた文字列が取得できます。
② innerHTMLプロパティ（HTML文字列を含む場合）
取得するテキストに、HTML文字列を含む場合は、innerHTMLプロパティ を使用します。
書式：element.innerHTML
先ほどの、textContentと同じ例で試してみます。
html
|
1 2 3 4 5 |
<div id="text-msg"> <p>HTMLを含む文字列</p> <button>ボタン要素</button> <p>この場合はどのように取得されるでしょうか？</p> </div> |
javascript
|
1 2 |
var textMsg = document.getElementById('text-msg'); console.log(textMsg.innerHTML); |
この場合、innerHTMLでは、textContentとは異なり、HTML文字列がそのまま取得できます。コンソールには、次のように表示されます。
|
1 2 3 |
<p>HTMLを含む文字列</p> <button>ボタン要素</button> <p>この場合はどのように取得されるでしょうか？</p> |
要素のテキストを設定
③ textContentプロパティ（HTML文字列を含まない場合）
HTML文字列を含まない文字列の場合は、textContentプロパティを使用します。
もし、HTML文字列が含まれていた場合、ただの文字列として設定されます。
そのため、”ブラウザにHTMLの要素を追加する” などの用途には向きません。
書式：element.textContent = “設定する文字列”
次の例では、div要素（id=text-mod-msg）に設定されている文字列を変更します。
html
|
1 |
<div id="text-mod-msg">このテキストは変更されます</div> |
javascript
|
1 2 |
var textModMsg = document.getElementById('text-mod-msg'); textModMsg.textContent = "テキストを変更しました。"; |
実行すると、以下のようにテキストが書き換わります。
|
1 |
<div id="text-mod-msg">テキストを変更しました。</div> |
さて、取得の時と同じように、次はHTMLタグを含む文字列を設定した場合はどうなるでしょうか？
javascriptを、次のように変更してみます。
|
1 |
textModMsg.textContent = "<p>テキストを変更しました。</p><button>ボタン</button>"; |
ブラウザには、次のように表示されます。
HTMLタグが、そのまま表示されています。実際は、タグ<> が文字実体参照され、次のようにエスケープされています。
|
1 |
<div id="text-mod-msg"><p>テキストを変更しました。</p><button>ボタン</button></div> |
このように、textContent を使用するとHTMLタグの無効化を行うことができるので、XSS対策としても有効になります。
④ createElement、createTextNodeメソッド（HTML文字列を含む場合）
createElementメソッド
新たに要素を作成することができます。
createTextNodeメソッド
要素に設定するテキストを作成することができます。
手順としては、次のようになります。
① createElement で要素を作成します。
② createTextNode で、①の要素に設定するテキストノードを作成します。
③ ①の要素に②のテキストノードを追加します。
例えば、textContentで追加した次の例を、HTML文字列 <p> や <button> を 要素として追加する場合は、次のようにします。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// 追加先の要素 var textModMsg = document.getElementById("text-mod-msg"); // p要素 --------------------------------------------- // p要素を作成 var newElemP = document.createElement("p"); // p要素に追加する内容を設定します。 var newElemPText = document.createTextNode("テキストを変更しました。"); // p要素にテキストノードを追加します。 newElemP.appendChild(newElemPText); // DOMにp要素を追加します。 textModMsg.appendChild(newElemP); // --------------------------------------------------- // button要素 --------------------------------------------- // button要素を作成 var newElemBtn = document.createElement("button"); // button要素に追加する内容を設定します。 var newElemBtnText = document.createTextNode("ボタン"); // button要素にテキストノードを追加します。 newElemBtn.appendChild(newElemBtnText); // DOMにbutton要素を追加します。 textModMsg.appendChild(newElemBtn); // --------------------------------------------------- |
次のように、p要素、button要素が HTMLとして反映されました。
このようにして、要素の追加を行います。
最後に、要素の追加には、innerHTMLを使うことができますが、きちんとサニタイジングしないと、XSSの危険性があるためオススメできません。