JavaScript: textContent の使い方

textContent プロパティは、 ノードおよびその子孫のテキスト情報を取得・設定するために使います。

通常、テキスト情報を取得・設定する場合は textContent プロパティ、 HTMLコードを取得・設定する場合は innerHTML プロパティを使用します。

使い方


// 取得
var text = elem.textContent;

// 設定
elem.textContent = text

サンプルコード

次のコードは、id="hoge" のdiv 要素の textContent を取得して表示します。


<div id='hoge'><b>Java<br>Script</b></div>

<script>

    var elem = document.getElementById('hoge');
    
    console.log(elem.textContent);  // JavaScript
    console.log(elem.innerHTML);    // <b>Java<br>Script</b>

</script>

div 要素内には、'JavaScript' というテキストと、 太字を意味する b タグ、改行を意味する br タグがあります。

textContent プロパティは、テキスト情報を表しますから、 div 要素内にある b タグや br タグは表示されず、 「JavaScript」というテキスト情報のみが表示されます。

タグを含めて取得したい場合は、innerHTML を使用します。

IE9 以前では innerText を使う

textContent プロパティは、IE9 以前では使用できません。 textContent プロパティの代わりに、innerText プロパティを使用します。

次のコードは、テキスト情報をtextContent で取得できない場合、 innerText で取得するロジックです。


var text = elem.textContent;
if (text == undefined) text = elem.innerText;

JavaScript入門