テキストのみを扱う — el.textContent = 'text'
textContent は「要素の中身をテキストとして読み書きする」ためのプロパティです。HTMLタグは解釈されず、そのまま文字列として表示されるので、安全にユーザー入力や動的文字列を表示したいときに最適です。
基本の使い方
<div id="msg"></div>
<script>
const el = document.getElementById("msg");
// テキストを代入
el.textContent = "こんにちは、世界";
// 現在のテキストを取得
console.log(el.textContent); // "こんにちは、世界"
</script>
- 役割: 要素内のテキストを「そのまま」設定・取得する。
- 特徴: HTMLタグは解釈されず、文字列として表示される。
- 安全性: ユーザー入力を表示する際に XSS（スクリプト混入）を防げる。
innerHTML との違い
- innerHTML: HTML文字列を解釈してタグを生成する。
"<b>hi</b>"→ 太字表示。危険な入力をそのまま入れるとスクリプトが実行される可能性あり。 - textContent: 文字列をそのまま表示。
"<b>hi</b>"→<b>hi</b>と文字列として出る。安全。
よく使うテンプレート集
ユーザー入力を安全に表示
const input = document.querySelector("#q");
const out = document.querySelector("#out");
input.addEventListener("input", () => {
out.textContent = input.value; // タグは解釈されず安全
});
動的メッセージの更新
const status = document.querySelector("#status");
function showStatus(msg) {
status.textContent = msg;
}
showStatus("ロード中...");
setTimeout(() => showStatus("完了しました"), 2000);
ループでリストを作る
const ul = document.querySelector("#list");
["A", "B", "C"].forEach(txt => {
const li = document.createElement("li");
li.textContent = txt;
ul.appendChild(li);
});
実務でのコツ
- ユーザー入力は必ず textContent: HTMLとして解釈させないことで安全に表示できる。
- 改行やスペースもそのまま:
textContentは空白や改行も保持する。見た目を整えるなら CSS のwhite-spaceを調整。 - 大量更新はまとめて: 頻繁に書き換える場合は DocumentFragment にまとめて作ってから挿入すると効率的。
- 取得時の違い:
innerTextは表示上のテキスト（CSSで非表示なら取れない）、textContentはDOM上のテキスト全部を返す。
ありがちなハマりポイントと対策
- タグが効かない:
el.textContent = "<b>hi</b>"→<b>hi</b>と文字列表示。- 対策: 本当にタグを解釈させたいなら
innerHTMLを使う。ただし安全性に注意。
- 非表示要素のテキストも取得される:
textContentはdisplay:noneの要素も含む。- 対策: 表示テキストだけ欲しいなら
innerTextを使う。
練習問題（手を動かして覚える）
<div id="safe"></div>
<div id="danger"></div>
<script>
const safe = document.getElementById("safe");
const danger = document.getElementById("danger");
// 1) 安全に文字列を表示
safe.textContent = "<b>タグは解釈されません</b>";
// 2) ユーザー入力を安全に出す
const userInput = "<img src=x onerror=alert(1)>";
danger.textContent = `入力: ${userInput}`; // 危険なタグもただの文字列に
// 3) 動的更新
setTimeout(() => {
safe.textContent = "3秒後に更新されました";
}, 3000);
</script>
直感的な指針
- テキストだけを安全に扱うなら textContent。
- タグを解釈させたいときは innerHTML（ただし危険）。
- ユーザー入力や外部データは必ず textContent に入れる。