textContent -JavaScriptのDOM（ノードおよびテキスト情報）を取得・設定する

投稿：2019年06月27日

textContentの説明

textContentは、DOM要素のノードやテキスト情報を取得したり設定することができます。html要素の中身を変更したり上書きすることができます。

textContentは、HTMLCSSに含まれるタグなどもすべてそのままで取得して返しますので、知覚的な反映はされません。

・textContentプロパティ…テキスト情報を取得や設定する場合に利用

・innerHTML プロパティ…HTMLコードを取得・設定する場合に利用、HTMLタグは知覚的に反映されます。

■textContent例

■ソースコード

<p>
  <input type="button" value="ここをクリック！" onclick="ctimes( 'osuyo' );">
</p>

<p id="osuyo" class="styleda">父の日は何を贈ろうかな！？</p>

<script type="text/javascript">
function ctimes(styleda) {
   document.getElementById(styleda).textContent = '<b>やっぱ食べ物が良いね！！</b>';
}
</script>

<p>

</p>

<p id="osuyo" class="styleda">父の日は何を贈ろうかな！？</p>

function ctimes(styleda) {

document.getElementById(styleda).textContent = '<b>やっぱ食べ物が良いね！！</b>';

}

</script>

■ブラウザ表示

父の日は何を贈ろうかな！？

↓

<b>やっぱ食べ物が良いね！！</b>

■innerHTMLの場合の例