0Pricing
JavaScript Academy · レッスン

要素を作成して挿入する

createElement と append で新しいノードを作成します。

「要素を作成して挿入する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

新しい要素を構築する

HTML 文字列を書く代わりに、コードで要素を構築できます。これにより XSS を回避でき、設定可能な実際の要素への参照も取得できます。

createElement

document.createElement は新しい、DOM から切り離された要素を作成します。要素はメモリ上に存在しますが、まだページには追加されていません。

const li = document.createElement("li");
li.textContent = "New item";

挿入前の設定

要素がまだDOMから切り離されている間に、クラス、属性、コンテンツを設定します。要素は挿入して初めて表示されます。

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

appendは、要素の最後の子としてノード（または文字列）を追加します。複数の引数を受け取れます。

const list = document.querySelector("ul");
list.append(li);

prepend

prependは、要素の最初の子としてノードを挿入し、既存の子を後ろに移動させます。

list.prepend(document.createElement("li"));

appendは文字列を受け取ります

古いappendChildとは異なり、appendはプレーンな文字列と複数の引数を一度に受け取れます。

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChildは従来からあるメソッドです。1つのノードだけを受け取り、そのノードを返します。一方、appendはundefinedを返します。

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBeforeは、指定した既存の子の前に新しいノードを配置し、正確な位置指定を可能にします。

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElementは、beforebegin、afterbegin、beforeend、afterendなどの位置を指定して、要素との相対位置に挿入します。

ref.insertAdjacentElement("beforebegin", li);

バッチ処理のためのDocumentFragment

多くの要素を追加する場合は、まずDocumentFragment内に要素を作成し、その後1回で挿入します。これによりレイアウトの再計算を最小限に抑えられ、高速になります。

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true)は要素とその子孫をコピーします。繰り返し使用する構造のテンプレート化に便利です。

const copy = li.cloneNode(true);
list.append(copy);

クイックチェック

最適な手法を選んでください。

まとめ

切り離された要素の作成にはcreateElementを使用し、設定してからappend/prepend（文字列と複数の引数に対応）、appendChild（単一のノード）、または正確な位置指定ができるinsertBefore/insertAdjacentElementで挿入します。多くの挿入をまとめて行う場合はDocumentFragmentを使用し、構造の再利用にはcloneNode(true)を使用します。

よくある質問

「要素を作成して挿入する」レッスンは無料ですか？

はい。「要素を作成して挿入する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「要素を作成して挿入する」で何を学びますか？

createElement と append で新しいノードを作成します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「要素を作成して挿入する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. テキストと HTML コンテンツを変更する
  2. 要素を作成して挿入する
  3. 属性とクラスを変更する
  4. ノードを削除・置換する
← JavaScript Academyに戻る