JavaScript がデータを div に追加

既存の div にデータを追加するには、対象を選択し、追加する値がプレーンテキストか信頼できる HTML かに応じて方法を選びます。通常のテキストには textContent またはテキストノードを使うと、HTML として解析されません。意図的にマークアップを追加する場合は insertAdjacentHTML を使います。以下の例では、スクリプトの実行前にページ内に <div id="myDiv"> 要素があるものとします。（JavaScript）

追加する内容に応じて方法を選ぶ

ユーザー入力などのプレーンテキストには textContent または createTextNode を使います。これらの API は文字列をテキストとして作成し、< などの文字をマークアップとして解釈しません。テキストや属性を持つ新しい要素が必要な場合は、要素を作成してノードとして追加します。

自分で管理している HTML 文字列を要素として解析する必要がある場合は insertAdjacentHTML を使います。すでに内容がある要素への追加に innerHTML += を使うのは避けてください。innerHTML を読み取って再設定すると内容が再解析され、子孫ノードが置き換えられます。置き換え後のツリーからは取り除かれますが、既存の JavaScript 参照は切り離されたノードを指したままです。リスナーも古いノードに付いたままで、新しいノードには適用されません。適切な方法は一律の速度比較ではなく、追加する内容の種類で決まります。

textContent または appendChild でプレーンテキストを追加する

この例では段落を作成し、テキストを設定してから、選択した div に新しいノードとして追加します。該当する要素がページにない場合、getElementById は null を返すため、使う前に結果を確認してください。

対象の要素があるページで、次の例を実行します。

このセクションのコードと表示されるラベルや出力は英語のままです。

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

このブラウザーの例は、提供されたパケット内では実行されていません。対象の要素があれば、テキストを内容とする段落を追加します。コード中の段落の文字列「A new paragraph.」は、例のバイト列を保つため英語のままです。ラッパー要素が不要であれば、document.createTextNode("More text") でテキストノードを直接作成し、そのノードを appendChild に渡すこともできます。

insertAdjacentHTML で HTML を追加する

対象に対して insertAdjacentHTML を呼び出し、挿入位置と HTML 文字列の両方を渡します。beforeend は、解析したノードを div の内側で現在の子要素の後ろに配置します。ほかの位置には、afterbegin（要素内で子要素の前）、beforebegin（要素のすぐ外側で前）、afterend（要素のすぐ外側で後ろ）があります。

このセクションのコードと表示されるラベルや出力は英語のままです。

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

このブラウザーの例は、提供されたパケット内では実行されていません。コード例の段落文字列「A new paragraph.」は英語のままです。渡した文字列を HTML として解析する必要がある場合に限り、この方法を使ってください。信頼できない入力を無害化する機能はありません。新しいマークアップを div の内側の末尾に追加するには、beforeend を使います。

innerHTML の使用には注意する

innerHTML を使うと、要素のマークアップを文字列として取得できます。文字列を連結して再設定すれば追加しているように見えますが、ブラウザーは要素の子孫を解析し直して置き換えます。既存の子孫ノードは置き換え後のツリーから切り離されますが、参照は古いノードを指したままで、リスナーもそのノードに残ります。それらのリスナーは置き換え後のノードには適用されません。ブラウザーは値をマークアップとして扱うため、信頼できないデータを innerHTML に渡すのは避けてください。クロスサイトスクリプティング（XSS）の脆弱性につながるおそれがあります。

このセクションのコードと表示されるラベルや出力は英語のままです。

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

このブラウザーの例は、提供されたパケット内では実行されていません。コード例の段落文字列「A new paragraph.」は英語のままです。この例は再設定時の動作を示しており、既存の子ノードを保ったまま追加するための推奨方法ではありません。動的なテキストには、要素を作成して textContent を設定し、その要素を追加してください。

jQuery でコンテンツを追加する

プロジェクトですでに jQuery を使っている場合、.append() は一致した各要素の末尾にコンテンツを追加します。.append() に渡した文字列は HTML として解析されるため、信頼できない文字列を渡さないでください。プレーンテキストには DOM ノードを作成して追加するか、上記のネイティブな textContent を使います。

このセクションのコードと表示されるラベルや出力は英語のままです。

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

このブラウザーの例は、提供されたパケット内では実行されていません。コード例の段落文字列「A new paragraph.」は英語のままです。実行には jQuery が読み込まれ、対象要素が存在している必要があります。どちらかが欠けている場合、ガード付きのコードは何も行いません。

結果を確認し、よくある間違いを避ける

セレクターが意図した要素に一致することと、要素が利用可能になってからスクリプトが実行されることを確認してください。たとえば、div の後にスクリプトを置くか、ドキュメントの読み込みを待ちます。getElementById("myDiv") は ID で要素を選択します。querySelector("#myDiv") も同じ要素を選択できる方法です。一致する要素がない場合は、その結果にメソッドを呼び出す前に処理してください。

プレーンテキストには textContent またはテキストノードを使い、文字がテキストのまま扱われるようにします。マークアップを対象の内側の末尾に挿入する場合は、insertAdjacentHTML("beforeend", html) を使い、HTML が信頼できること、または適切なポリシーで無害化されていることを確認してください。innerHTML += は、既存ノードを保ったまま追加する操作として扱わないでください。内容を HTML として解析する必要があり、プロジェクトですでに jQuery を使っている場合に限り、jQuery の .append() を選びます。ここで扱ったのはコンテンツの追加です。要素の削除は別の DOM 操作です。