HTML要素.textContent 対応: DOM Level 3（2004）

HTML要素内のテキストを取得、または設定します。HTMLタグは解釈されず、純粋なテキストとして扱われます。

構文

// テキストを取得します。
var text = element.textContent;

// テキストを設定します。
element.textContent = "新しいテキスト";

サンプルコード

<p id="sample">こんにちは<span>世界</span></p>

var el = document.querySelector("#sample");

// HTMLタグを無視してテキストのみを取得します。
console.log(el.textContent); // 『こんにちは世界』と出力されます。

// テキストを設定します。HTMLタグは文字列としてそのまま表示されます。
el.textContent = "新しい<span>テキスト</span>";
// 画面には「新しいテキスト」とそのまま表示されます。

textContentとinnerHTMLの違い

プロパティ	概要
textContent	HTMLタグを解釈しません。テキストのみを扱うため安全です。ユーザーが入力した値を表示する場合に適しています。
innerHTML	HTMLタグを解釈します。HTMLを動的に挿入したい場合に使用しますが、ユーザーの入力値をそのまま挿入すると、悪意のあるスクリプトが実行されてしまう危険性があります。XSSについては『HTML要素.innerHTML』のページを参照してください。