JavaScript: HTML 要素にテキストを出力する
概略
div タグや span タグなどの要素にテキストを出力して表示する方法の話です。 下のような方法があります。
- 要素の textContent や innerText にテキストをセットする。
- 要素の append() 関数 でテキストを追加する。
コントロール要素 ( textarea タグ、input タグ)
では上の方法を使わないので区別してください。
textarea や input の場合は textContent ではなく
value にテキストをセットします。
textarea タグ
textContent や innerText にテキストをセットする
指定した HTML 要素の textContent プロパティ や innerText プロパティ に文字列をセットすると 要素に文字列が表示されます。 すでに表示している文字列がある場合は 古い文字列が削除され新しい文字列に置き換わります。
innerText では文字列に改行があると <br> タグに置き換わります。 textContent では文字列に改行があっても無視されます。
サンプル
ボタンを押すと div タグの文字列を書き換えるサンプル。
JavaScript: HTML の要素を取り出す
innerHTML はなるべく使わない
innerHTML にテキストや HTMLコードをセットする方法もあります。 ただし、使い方によっては セキュリティの問題が出る ので、 お試し用途以外ではあまり使わない方が良いです。 文字列のエスケープが必要になる場合があります。 タグの文字 <, > を <, > に置換するといった単純な話ではないので注意。
- TestJS_innerHTML_security01.html
セキュリティ上、問題のあるサンプル。
HTML 要素を作るサンプル
JavaScript: document.write()
append() で文字列を出力する (2023/10)
Element.append() 関数 で指定の HTML 要素に文字列を出力することができます。 textContent と異なる点は、textContent は要素の内の古い文字列を削除して新しい文字列に置き換えますが、 append() はすでにある文字列の末尾に追加で出力します。
サンプル
ボタンを押すと pre タグや div タグに append() で文字列を出力するサンプル。
テストプログラムの実行とソース表示の例
いろいろ
- pre タグの中で append() すると 文字列中の \n 改行コードは認識され改行して表示されます。
- 文字列に HTML タグが含まれていても HTML タグとして認識されません。
タグの文字 <, > はエスケープされ通常の文字になります。 script タグのプログラムコードが混ざっていても実行されません。
HTML 要素を自体を JavaScript で作る話もあります
あらかじめ HTML
に書かれている要素を取り出して文字列をセットする話とは別に、
span, li, table などの要素自体を JavaScript で作成して HTML
に追加する話もあります。