innerText は、JavaScriptでDOM要素のテキストを操作する際に使われるプロパティです。innerHTML とよく似ていますが、テキストのみを扱いたい場合には innerText を使用するのが適しています。この記事では、innerText の使い方と注意点を説明します。
innerText とは？
innerText は、HTML要素の表示されているテキストを取得したり、設定するためのプロパティです。innerText を使うと、タグやHTML構造を無視して、純粋にテキストだけを扱うことができます。
基本的な使い方
テキストの取得
innerText プロパティを使用すると、指定した要素内に含まれているテキストを取得することができます。
例：要素内のテキストを取得
<div id="example">こんにちは、世界！</div>
let element = document.getElementById('example');
console.log(element.innerText); // "こんにちは、世界！"
テキストの設定
innerText を使って、要素内のテキストを変更することもできます。
例：要素内のテキストを変更
<div id="example">こんにちは、世界！</div>let element = document.getElementById('example');
element.innerText = "新しいテキストです！";
console.log(element.innerText); // "新しいテキストです！"innerText と innerHTML の違い
innerText は要素内のテキストのみを扱いますが、innerHTML は要素内のHTML全体（タグを含む）を操作します。例えば、HTML構造を維持したい場合やタグを扱う必要がある場合には、innerHTML を使用します。
例：innerText と innerHTML の違い
<div id="example">
<strong>太字のテキスト</strong>
</div>let element = document.getElementById('example');
// innerTextはテキストのみ取得
console.log(element.innerText); // "太字のテキスト"
// innerHTMLはHTML構造も含めて取得
console.log(element.innerHTML); // "<strong>太字のテキスト</strong>"innerText の注意点
見えない要素の扱い
innerText は、CSSで display: none; や visibility: hidden; が設定されている要素のテキストを無視します。つまり、表示されているテキストだけが取得対象となります。
改行や空白の扱い
innerText は、要素内のテキストを取得する際に、ブラウザに表示されている通りに改行や空白を維持します。一方、innerHTML ではHTML内の改行や空白がそのまま扱われるため、異なる結果になることがあります。
例：改行の扱い
<div id="example">
1行目
<br>
2行目
</div>let element = document.getElementById('example');
console.log(element.innerText); // "1行目\n2行目"
console.log(element.innerHTML); // "1行目<br>2行目"応用例
フォーム入力内容の確認
innerText を使うと、ユーザーが入力したテキストを画面に表示する場合などに便利です。
<input type="text" id="inputText" placeholder="テキストを入力してください">
<button onclick="showText()">表示</button>
<p id="displayText"></p>function showText() {
let input = document.getElementById('inputText').value;
let display = document.getElementById('displayText');
display.innerText = input;
}上記の例では、ボタンをクリックすると入力されたテキストが <p> 要素内に表示されます。
結論
innerText は、HTML要素内のテキストを簡単に取得・変更できる便利なプロパティです。テキストのみを操作したい場合に使い、HTML構造を扱う際には innerHTML を選ぶと良いでしょう。表示されているテキストだけを取り扱う場合や、改行や空白をそのまま保持したい場合に特に有効です。
