textContent -JavaScriptのDOM（ノードおよびテキスト情報）を取得・設定する
textContentの説明
textContentは、DOM要素のノードやテキスト情報を取得したり設定することができます。html要素の中身を変更したり上書きすることができます。
textContentは、HTMLCSSに含まれるタグなどもすべてそのままで取得して返しますので、知覚的な反映はされません。
・textContentプロパティ…テキスト情報を取得や設定する場合に利用
・innerHTML プロパティ…HTMLコードを取得・設定する場合に利用、HTMLタグは知覚的に反映されます。
■textContent例
■ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
■ブラウザ表示
父の日は何を贈ろうかな！？
↓
<b>やっぱ食べ物が良いね！！</b>
■innerHTMLの場合の例
■ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 |
<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).innerHTML = '<b>やっぱ食べ物が良いね！！</b>'; } </script> |
■ブラウザ表示
父の日は何を贈ろうかな！？
↓
やっぱ食べ物が良いね！！