3秒でわかる
要素の中身を HTML 文字列として読み書きするプロパティ。手軽な反面、外部由来の文字列を渡すと XSS の入口になります。
もう少し詳しく
どういうものか
DOM 要素が持つプロパティで、その要素の内側にある HTML をタグごと文字列として取り出したり、文字列を代入して中身を丸ごと差し替えたりできる。代入された文字列はブラウザによって解析され、実際の要素として組み立てられる。
タグを含む構造をまとめて作れるため、createElement を何度も呼ぶより記述が短くなる。
なぜ必要か
複数の要素からなるかたまりを作るとき、DOM API だけで書くと、要素を作り、属性を設定し、親に追加する手順が要素の数だけ並ぶ。innerHTML なら、できあがりの形をそのまま書ける。テンプレートリテラルと組み合わせると、繰り返しの描画が見通しよくなる。
具体例
const items = [
{ id: 1, name: "コーヒー", price: 480 },
{ id: 2, name: "紅茶", price: 420 },
];
// 中身を丸ごと差し替える
document.querySelector("#list").innerHTML = items
.map((it) => `<li data-id="${it.id}">${it.name} ${it.price}円</li>`)
.join("");
// 読み取ることもできる
console.log(document.querySelector("#list").innerHTML);外部から来た値を混ぜる場合は、代入先を分けて textContent を使う。
const li = document.createElement("li");
li.textContent = userInput; // タグとして解釈されない
list.appendChild(li);つまずきやすいところ
最大の問題が XSS になる。利用者の入力や API の応答をそのまま innerHTML に渡すと、