【JavaScript】HTMLタグ内の文字列を変更する方法｜textContent・innerHTML・innerTextの使い分けとXSS対策

// <div id="msg">こんにちは</div>
const el = document.getElementById("msg");

el.textContent = "送信が完了しました";
// → <div id="msg">送信が完了しました</div>

// HTMLを含む文字列も「文字」として表示される（タグ解釈されない）
el.textContent = "<b>太字にならない</b>";
// → 画面には <b>太字にならない</b> がそのまま表示される

const el = document.getElementById("msg");

el.innerHTML = "<strong>完了</strong>しました";
// → <strong> が太字として反映される

el.innerHTML = ""; // 中身を空にする

// <div id="box">見える<span style="display:none">隠し</span></div>

const el = document.getElementById("box");

console.log(el.textContent); // "見える隠し"（非表示も含む・生のテキスト）
console.log(el.innerText);   // "見える"（表示されている分だけ）

// クラスで1つ取得して変更
document.querySelector(".title").textContent = "新しいタイトル";

// 複数の要素をまとめて変更
document.querySelectorAll(".item").forEach((el, i) => {
  el.textContent = `項目 ${i + 1}`;
});

const list = document.getElementById("list");

// HTMLを末尾に追加（既存はそのまま）
list.insertAdjacentHTML("beforeend", "<li>新しい項目</li>");

// テキスト/ノードを末尾に追加（XSSの心配がない）
list.append("追記テキスト");

const form = document.getElementById("form");
const result = document.getElementById("result");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // ユーザー名はユーザー入力なので textContent で安全に表示
  const name = document.getElementById("name").value;
  result.textContent = `${name} さん、送信が完了しました`;
});