【JavaScript入門】innerHTMLとtextContentとinnerTextの違い
display:noneがある場合以下のHTMLを使って違いを検証していきます。
HTML
<div id="divA">This is <span style="display:none">some</span> text!</div>
innerHTMLの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerHTML);
実行結果
This is <span style="display:none">some</span> text!
textContentの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').textContent);
実行結果
This is some text!
innerTextの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerText);
実行結果
This is text!
brがある場合以下のHTMLを使って違いを検証していきます。
HTML
<div id="divA"><p>あいうえお<br>かきくけこ<br>さしすせそ</p></div>
innerHTMLの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerHTML);
実行結果
<p>あいうえお<br>かきくけこ<br>さしすせそ</p>
textContentの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').textContent);
実行結果
あいうえおかきくけこさしすせそ
innerTextの場合は以下のような結果になります。
js
console.log(document.getElementById('divA').innerText);
実行結果
あいうえお
かきくけこ
さしすせそ
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！