vote life iconVote Life: /

DevNotes - JavaScript

innerText 要素内のテキストを取得

2022-04-11

HTMLElement.innerText - Web API | MDN

構文

要素内のテキストを取得。
renderedText = element.innerText; // 取得
element.innerText = string; // 設定

非表示テキストや brタグ・scriptタグの取得

人間が読める・ブラウザに表示されるテキストを取得し、スタイルで非表示に設定されているテキストは返さない。
brタグは改行され、scriptタグは無視される。

設定するテキストにタグが含まれる場合

値がHTMLとして解析されず、特殊文字が含まれる場合はエスケープされ、ただの文字列として扱われる。
タグを設定するなら element.innerHTML を使う。

取得 html

<div id="text1"> <p>p</p> <span>span</span> <p>br1<br>br2</p> </div>

取得 js

const text1 = document.getElementById("text1").innerText; console.log(text1); /* p span br1 br2 */

設定 html (before)

<div id="text2"><p>p1&p2</p></div>

設定 js

document.getElementById("text2").innerText = "<div id="text2"><p>p1&p2</p></div>";

設定 html (after)

const text2 = document.getElementById("text2").innerText; console.log(text2); // "&lt;div id=&quot;text2&quot;&gt;&lt;p&gt;p1&amp;p2&lt;/p&gt;&lt;/div&gt;"