createTextNode とは何か
createTextNode は、「テキストノード」を新しく作るためのメソッドです。HTML の中身は要素ノード（div、p、span など）とテキストノード（純粋な文字）で構成されています。createTextNode は“文字だけ”を安全に生成し、任意の場所に挿入できます。ここが重要です：生成したテキストはタグとして解釈されず、文字としてそのまま表示されるため、外部データを扱うときに安全性が高い手段です。
基本の使い方（作る→入れるの最短ルート）
文字を作って、要素に挿入する
<div id="box"></div>
<script>
const box = document.getElementById("box");
const text = document.createTextNode("こんにちは、世界");
box.appendChild(text); // 末尾に文字が入る
</script>
この例では「文字」をノードとして作り、要素に追加しています。appendChild 以外にも prepend（先頭）、insertBefore（指定位置）、replaceChild（置き換え）などで柔軟に挿入できます。
既存の要素に先頭・途中へ差し込む
<p id="msg"><b>重要:</b> </p>
<script>
const msg = document.getElementById("msg");
const text = document.createTextNode("お知らせがあります");
msg.appendChild(text); // <b>重要:</b> の後に文字が続く
</script>
ここが重要です：createTextNode は「部分的に文字を差す」場面に向いています。要素全体を置き換える必要がないため、イベントや構造を壊しにくいのが利点です。
textContent・innerHTML との違い（いつどれを使うか）
textContent は「まとめて文字を入れ替える」
el.textContent = "新しい文字"; // 子要素を含むテキストを一括置き換え
要素の中身を“文字だけ”にしたいときの最短手段。構造を維持せず、文字で上書きします。
innerHTML は「HTML を展開する」
el.innerHTML = "<b>太字</b>"; // タグが解釈される（安全性に注意）
構造ごと差し替える用途。外部データの直接挿入は危険です。
createTextNode は「既存構造を保ったまま文字だけ追加」
const strong = document.createElement("strong");
strong.appendChild(document.createTextNode("注意"));
el.appendChild(strong);
ここが重要です：部分的な文字追加・差し込みが必要なら createTextNode、要素全体を文字にしたいなら textContent、HTML 展開が必要なら innerHTML（ただし厳格管理）という使い分けが基本です。
安全性の要点（XSS を避ける鉄則）
外部データやユーザー入力は必ず「文字」として扱うのが鉄則です。createTextNode は文字を“そのまま”作るため、HTML として実行されません。
function addSafeUserName(container, name) {
const text = document.createTextNode(String(name ?? ""));
container.appendChild(text); // どんな入力でも文字として安全に挿入
}
ここが重要です：インジェクション対策の基本は“文字で入れる”。createTextNode／textContent は安全な選択肢。innerHTML は、固定テンプレート＋エスケープ済みの動的部分に限定します。
改行・空白・特殊文字の扱い（表示と文字の違い）
createTextNode は渡した文字列をそのまま保持します。改行や空白は文字として挿入されますが、見た目の改行は CSS（white-space）設定次第で変わります。
const t = document.createTextNode("一行目\n二行目"); // \n は文字として入る
el.appendChild(t); // 表示が改行されるかは CSS の white-space で決まる
ここが重要です：表示の整形は CSS、文字の安全な生成と挿入は createTextNode。役割を分けることで、意図通りの見え方と安全性を両立できます。
複数テキストの高速追加（フラグメントでバッチ化）
大量に要素とテキストを追加する場合は、DocumentFragment を使って一度に挿入すると高速です。
const list = document.getElementById("list");
const frag = document.createDocumentFragment();
for (let i = 0; i < 500; i++) {
const li = document.createElement("li");
li.appendChild(document.createTextNode(`Item ${i}`));
frag.appendChild(li);
}
list.appendChild(frag); // まとめて挿入→再描画コストが小さい
ここが重要です：DOM の読み書きをバッチ化すると、パースと再描画の回数が減り、体感速度が上がります。
部分差し替えと並べ替え（insertBefore・replaceChild を活用）
テキストを任意の位置に差し込みたい、既存のノードだけ置き換えたい場面では、ノード操作が有効です。
const p = document.getElementById("msg");
const before = p.firstChild; // 最初の子（テキストや要素）
const t = document.createTextNode("先頭に追加: ");
p.insertBefore(t, before); // 先頭にテキストを差し込む
const newT = document.createTextNode("全置換テキスト");
p.replaceChild(newT, p.lastChild); // 最後の子を文字で置き換える
ここが重要です：createTextNode は「粒度の細かい更新」と相性がよく、イベント消失や全置換による副作用を避けやすいです。
テキストノードの編集（nodeValue・data・normalize）
テキストノード自体を編集することもできます。隣接するテキストノードが複数できた場合は、normalize で一つにまとめられます。
const t = document.createTextNode("Hello");
t.nodeValue += " World"; // または t.data += " World";
const el = document.getElementById("box");
el.appendChild(t);
el.appendChild(document.createTextNode("!"));
// 連続したテキストノードを結合
el.normalize();
ここが重要です：細かな文字編集が必要ならノードプロパティ（nodeValue/data）を使う。複数テキストが隣接するときは normalize でクリーンアップできます。
実践例：安全なカード生成（構造は DOM、文字はテキスト）
<section id="products"></section>
<script>
const data = [
{ name: "Apple", desc: "赤い果物" },
{ name: "Banana", desc: "黄色い果物<script>alert(1)</script>" } // 悪意ある入力の想定
];
const root = document.getElementById("products");
const frag = document.createDocumentFragment();
data.forEach(item => {
const article = document.createElement("article");
article.className = "card";
const h2 = document.createElement("h2");
h2.appendChild(document.createTextNode(item.name)); // 名前は文字として安全に
const p = document.createElement("p");
p.appendChild(document.createTextNode(item.desc)); // 説明も文字として安全に
article.appendChild(h2);
article.appendChild(p);
frag.appendChild(article);
});
root.appendChild(frag);
</script>
ここが重要です：構造は createElement、文字は createTextNode。外部データが何であっても“文字”として扱われ、XSS を防げます。
まとめ
createTextNode は「テキストノードを安全に生成して、既存構造に部分的に差し込む」ための基本メソッドです。外部データは常に文字として扱い、構造は DOM（createElement 等）で作るのが鉄則。表示の整形は CSS に任せ、挿入はフラグメントでバッチ化すると高速。textContent・innerHTML との役割を明確に分け、粒度の細かい更新に createTextNode を使うことで、セキュリティ・保守性・性能の三拍子が揃った実装になります。