textContent と innerText の違い

textContent と innerText は、要素のテキストを取得・設定するプロパティです。似ていますが、いくつかの違いがあります。

基本的な使い方

&lt;p id="message"&gt;Hello, World!&lt;/p&gt;

const p = document.getElementById('message');

// 取得
console.log(p.textContent); // "Hello, World!"
console.log(p.innerText);   // "Hello, World!"

// 設定
p.textContent = '新しいテキスト';

主な違い

特徴	textContent	innerText
非表示要素	含む	含まない
<style> <script>	含む	含まない
改行・空白	そのまま	整形される
パフォーマンス	速い	遅い

非表示要素の扱い

display: none の要素のテキストは、innerText では取得されません。

&lt;div id="container"&gt;
  表示テキスト
  &lt;span style="display: none;"&gt;非表示テキスト&lt;/span&gt;
&lt;/div&gt;

const container = document.getElementById('container');

console.log(container.textContent); // "表示テキスト 非表示テキスト"
console.log(container.innerText);   // "表示テキスト"

改行の扱い

&lt;div id="content"&gt;
  行1
  行2
  行3
&lt;/div&gt;

innerText は見た目どおりの改行を返しますが、textContent は HTML の空白をそのまま返します。

実際に動かしてみよう

HTML

CSS

JavaScript

&lt;div id="target"&gt;
  &lt;span&gt;表示テキスト&lt;/span&gt;
  &lt;span style="display:none"&gt;非表示テキスト&lt;/span&gt;
&lt;/div&gt;
&lt;button id="textContentBtn"&gt;textContent&lt;/button&gt;
&lt;button id="innerTextBtn"&gt;innerText&lt;/button&gt;
&lt;pre id="result"&gt;&lt;/pre&gt;

const target = document.getElementById('target');
const result = document.getElementById('result');

document.getElementById('textContentBtn').addEventListener('click', () => {
  result.textContent = 'textContent: "' + target.textContent.trim() + '"';
});

document.getElementById('innerTextBtn').addEventListener('click', () => {
  result.textContent = 'innerText: "' + target.innerText + '"';
});

セキュリティ面

どちらもテキストとして設定するので、HTML がエスケープされます。

element.textContent = '&lt;script&gt;alert("XSS")&lt;/script&gt;';
// &lt;script&gt; がそのまま文字として表示される（実行されない）

これは innerHTML との大きな違いです。ユーザー入力を表示するときは textContent や innerText を使うと安全です。

どちらを使うべきか

textContent

パフォーマンスが良い。非表示要素も含む。通常はこちら

innerText

見た目どおりのテキストが欲しいとき。遅い

基本的には textContent を使い、表示されているテキストだけが必要な場合に innerText を使う、という使い分けがおすすめです。