DevNotes - JavaScript
innerText 要素内のテキストを取得
2022-04-11HTMLElement.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); // "<div id="text2"><p>p1&p2</p></div>"