【JavaScript】要素を追加する方法を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptを学び始めると、ウェブページへ新しい要素を追加したり、表示している内容を動的に変化させたりしたいと考える方が多いのではないでしょうか。

いわゆるJavaScript 要素 追加のテクニックは、DOM（Document Object Model）の仕組みを理解するうえで欠かせない項目です。

たとえば、ボタンをクリックしたタイミングでリストを生成したり、ユーザーが入力したコメントを表示エリアに新しく配置したりするといった動作は、DOM操作が基本になっています。

初心者の方は「どの関数を呼べば要素を追加できるの？」と疑問を持つことがあるかもしれません。

そこで本記事では、JavaScriptにおけるDOM操作の基本的な知識から実務での活用シーンまでを掘り下げつつ、実際に要素を追加する方法を丁寧に紹介します。

実際のプロジェクトでは、単に要素を追加するだけでなく、その後のスタイル調整やイベントの付与、そしてパフォーマンス面での工夫も必要になります。

そうした場面を念頭に置きながら、それぞれの実装方法がどのように役立つかを具体的に解説していきます。

理解が深まれば、新しい要素を柔軟に追加できるようになり、UI全体の動きや見た目を思い通りにコントロールしやすくなるでしょう。

それでは最初に、この記事でわかる内容を箇条書きでまとめます。

この記事を読むとわかること

  • JavaScript 要素 追加に必要な基本的なDOM操作の仕組み
  • 要素追加の具体的な方法（appendChildやappendなど）
  • 実務での活用シーン（フォーム送信後のリスト生成など）
  • 要素を追加する際の注意点（パフォーマンスや安全性など）
  • デバッグや保守をしやすくするための考え方

JavaScriptで要素を追加する基本的な流れ

まず、JavaScriptで要素を追加する一般的な流れを見てみましょう。

DOM操作をする場合、document.createElement などのメソッドで新しい要素を生成し、append や appendChild を使って既存のDOMツリーに組み込むのが基本です。

このとき、要素を追加する「親要素」や、どの場所に配置するかを意識する必要があります。

新しいHTML要素を生成しただけでは、画面に何も表示されません。

生成した要素を、ページのどこに入れるかを指定して初めてユーザーの目に触れる形になります。

たとえば、メインコンテンツの最後に文章を追加したいのか、特定のリストの末尾に新しいリストアイテムを追加したいのかで書き方は少し異なります。

以下は、DOMに要素を追加する際のおおまかなステップです。

  1. createElement を使って要素を作成
  2. テキストや属性を設定（innerText や setAttribute など）
  3. 追加先となる親要素を取得（document.querySelector など）
  4. 親要素に対して作成した要素を appendChild などで追加

イメージが湧きやすいように、次の見出しで具体的にコードを示します。

この流れを理解しておくことで、どのような要素でも比較的容易にページへ組み込むことができます。

createElementで新しい要素を生成する方法

JavaScriptでは、ページ上に存在しない新しいタグを動的に作るときに createElement メソッドを使います。

これはJavaScriptコードで書くと非常にシンプルです。

// 新しいdiv要素を作る
const newDiv = document.createElement("div");

// 生成したdiv要素にテキストを設定する
newDiv.innerText = "これは新しく追加した要素です。";

この段階では、まだ画面上に newDiv は表示されません。

document.createElement で生成された要素は、単にJavaScriptのメモリ空間の中に作られただけなので、あくまでページ上に配置されていないということです。

ここにテキスト以外の属性を付与することも可能です。

たとえば、次のようにクラス名やID、カスタムデータ属性などを付けられます。

newDiv.className = "highlighted";  // CSSで利用するクラス名を設定
newDiv.id = "unique-element";      // IDを付与
newDiv.setAttribute("data-info", "custom-data"); // カスタムデータ属性

実務での活用シーンとしては、ユーザーが操作したタイミングで説明文を表示したい場合や、ロード完了後にガイドメッセージを差し込みたい場合などが挙げられます。

DOMの基本的な仕組みを押さえておくことで、どのような場面でも柔軟に要素を作り出せるようになります。

生成した要素をDOMに追加するメソッド

次に、新しく作った要素をDOMツリーに実際に挿入する方法を見ていきましょう。

JavaScriptのDOM操作では、主に下記のメソッドが用いられます。

  • appendChild
  • append
  • insertBefore
  • innerHTML を使った書き換え

それぞれ少しだけ特徴が異なるので、簡単に解説します。

appendChild

appendChild は、指定した「親要素」の「最後」に子要素として追加します。

コード例は以下の通りです。

// 親要素を取得
const parentElement = document.getElementById("container");

// 作成した新しい要素を追加
parentElement.appendChild(newDiv);

この場合、 container というIDを持った要素の末尾に newDiv が配置されます。

要素がまだ存在しない状態から生成して、最終的に画面へ表示する、一連の流れを短いコードでまとめると次のとおりです。

// 親要素を取得
const parentElement = document.getElementById("container");

// 新しい要素を作成
const newParagraph = document.createElement("p");
newParagraph.innerText = "追加された段落です。";

// 親要素の末尾に追加
parentElement.appendChild(newParagraph);

この appendChild は、Nodeオブジェクトを追加するためのメソッドです。

文字列を直接指定することはできない点に注意が必要です。

append

append は、Nodeオブジェクトだけでなく、文字列を渡して一度に要素を追加することも可能です。

const container = document.getElementById("container2");

// 文字列を直接追加
container.append("この文章はappendで追加されました。");

// すでに存在している要素を取得し、それを別の要素に移動することも可能
const existingElement = document.getElementById("someElement");
container.append(existingElement);

appendChild との大きな違いは、文字列を扱える点と、複数の引数を渡せる点にあります。

実務では、シンプルにテキストだけを後から加えたいときなどに有用です。

insertBefore

少し変わった使い方としては、既存の子要素の「前」に新しい要素を挿入したいケースがあります。

その場合に insertBefore が使われます。

// 追加先の親要素
const list = document.querySelector("ul");

// 先頭に挿入したい要素
const newItem = document.createElement("li");
newItem.innerText = "先頭に追加された要素";

// 親要素の一番最初の子要素を取得
const firstChild = list.firstChild;

// 一番最初の子要素の前に挿入
list.insertBefore(newItem, firstChild);

ここでは、newItem がリストの先頭に挿入されるイメージです。

「特定の位置」に要素を差し込みたい場合にも、この insertBefore が大いに役に立ちます。

innerHTML で直接書き換える方法

要素を一度に複数まとめて追加したい場合や、HTMLタグを直接書き換えたい場合には innerHTML が利用されることもあります。

const container = document.getElementById("content");
container.innerHTML += "<p>innerHTMLを使って要素を追加しました</p>";

ただし、この方法は文字列連結によってHTMLを生成するため、扱うデータをしっかり安全に管理しないと、不正なスクリプトを混入されるリスクがあります。

実務では、ユーザー入力を直接 innerHTML に代入するようなコードは避けるべきです。

一方で、テンプレート的に使う場合や、サーバーから取得したデータがすでに安全であることがわかっている状況では、複数要素をまとめて生成できるので便利です。

実務での活用シーン：フォーム送信後にリストを追加

DOM操作で要素を追加する最も典型的な事例としては、ユーザーがフォームに入力した内容をリスト形式で追加表示するケースが挙げられます。

たとえば、コメント投稿欄のようなものをイメージしてください。

ユーザーがテキストを入力し、「送信」ボタンを押したら、コメント一覧の一番最後に新しいコメント要素を追加するという流れです。

const commentForm = document.getElementById("comment-form");
const commentList = document.getElementById("comment-list");

commentForm.addEventListener("submit", function (event) {
  event.preventDefault();

  // 入力されたコメントを取得
  const input = document.getElementById("comment-input");
  const newCommentText = input.value;

  // 新しいコメント要素を作成
  const newCommentItem = document.createElement("li");
  newCommentItem.innerText = newCommentText;

  // リストに追加
  commentList.appendChild(newCommentItem);

  // 入力欄をクリア
  input.value = "";
});

このように、ユーザーアクションが発生したタイミングで createElement と appendChild を使い、必要な分だけ要素を追加できます。

実務でのポイントとしては、フォーム送信時のイベントハンドラ内でどの要素を追加するかを明確にし、追加後にUIがわかりやすい形で更新されるようにすることが重要です。

また、たくさんの要素を一度に追加する場合は、パフォーマンス面を考慮して、一時的にフラグメント（DocumentFragment）に要素をまとめて追加し、最後にフラグメント自体をDOMに追加するなどのテクニックがあります。

実務での活用シーン：動的なナビゲーションメニュー

もう一つのケースとして、ナビゲーションメニューの切り替えを考えてみます。

ショッピングサイトのように「商品カテゴリー」がたくさんある場合、一度に全てを表示すると長大なメニューになってしまうため、ユーザーが選んだジャンルに応じて動的にメニュー項目を追加する、といった機能がよく使われます。

function loadMenuItems(category) {
  const navMenu = document.getElementById("nav-menu");

  // 既存のメニューをクリア
  navMenu.innerHTML = "";

  // 仮にサーバーから受け取ったメニューの例
  const items = getMenuDataFromServer(category);

  // メニューを動的に生成して追加
  items.forEach(item => {
    const li = document.createElement("li");
    li.innerText = item;
    navMenu.appendChild(li);
  });
}

このように、受け取ったデータを元にして要素をどんどん作っては追加する、という操作が繰り返されます。

実務では、メニュー項目やリンク先などが頻繁に変更になることも少なくありません。

そうしたとき、JavaScript側でDOM操作を行うことで、即座にUIの更新ができるようになります。

パフォーマンス上の注意点

要素を追加する操作を何度も繰り返すと、ブラウザがそれに応じたレイアウト再計算を行うため、画面の再描画が頻繁に起こる可能性があります。

たとえば、100個の要素を1つずつループで appendChild すると、そのたびにDOMが再構築されることがあります。

そこで実務では以下のような方法を組み合わせて、余計な再計算を減らすことが検討されます。

  • DocumentFragment を利用してまとめて追加する
  • 要素のスタイルレイアウトが大きく変わらないようにCSSを工夫する
  • 非表示状態（display: none;）で一度に要素を生成し、最後に表示する

例として、DocumentFragment を使って一括で要素を追加するコードは次のようになります。

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const item = document.createElement("p");
  item.innerText = `要素番号: ${i}`;
  fragment.appendChild(item);
}

// まとめて追加
document.getElementById("container").appendChild(fragment);

このように、フラグメントに対してまとめて要素を生成し、最後にDOMツリーへ挿入するほうが、1つずつ直接DOMに加えるよりもパフォーマンス面で有利なケースがあります。

特に、大量のデータを一度に表示する場面では意識しておくとよいでしょう。

多くの要素を連続で追加する際には、フラグメントの活用や、DOM操作の回数をまとめる工夫がポイントです。

セキュリティ面での注意点

先ほど軽く触れましたが、innerHTML を使って直接HTML文字列をページ内に差し込む場合は、セキュリティリスクに気を配る必要があります。

悪意のあるユーザーがスクリプトを埋め込むような文字列を入力した場合、それをそのまま innerHTML に代入すると、クロスサイトスクリプティング（XSS）の原因になる可能性があります。

したがって、実務ではユーザー入力を検証し、予期しないタグやスクリプトが入り込まないように処理することが大切です。

単純なテキストの追加であれば、textContent や innerText を使ってスクリプトを実行できない形で扱うのが安全です。

要素を動的に追加するときは、必ず入力データが信頼できるものであるかを確認するという習慣を身につけましょう。

テストとデバッグのポイント

初心者のうちは、DOM操作がうまくいかないときに「なぜ要素が表示されないのか」がわからず、混乱することがあります。

そんなときは、以下のようなステップでトラブルシュートしてみてください。

コンソールにエラーが出ていないか確認

変数名のタイプミスや要素の取得に失敗している場合、コンソールにエラーが出ている可能性があります。

要素の取得先が正しいか再確認

document.getElementById や querySelector で、想定通りの要素を取れているかどうか確認しましょう。

追加先の要素が画面外または非表示になっていないか

CSSのスタイルやレイアウトの都合で、追加した要素がユーザーの視界に入っていないケースもあります。

イベントのタイミングをチェック

例えば「ページ読み込み前に要素取得しようとしている」など、タイミングのズレがエラーの原因となることが多々あります。

ひとつひとつチェックしていくことで、原因を特定しやすくなるはずです。

また、複数の要素を追加している場合、どの要素が正しく追加され、どこで失敗しているのかをコンソールログなどで細かく出力して確認すると、バグをスムーズに解消できます。

イベントハンドラの設定と要素追加の流れ

動的に追加した要素にも、後からイベントハンドラを設定したいケースがよくあります。

たとえば、新しく作ったボタンにクリックイベントを付けるといった具合です。

このとき、要素を生成した後に addEventListener を呼び出すのが一般的なやり方です。

const newButton = document.createElement("button");
newButton.innerText = "クリックしてね";

// ボタンにイベントを付与
newButton.addEventListener("click", function() {
  alert("新しく追加されたボタンがクリックされました！");
});

// 最後に追加
document.body.appendChild(newButton);

また、イベント委譲という手法を使えば、親要素に対してイベントを設定し、実際のクリック対象を判別して処理を振り分けることができます。

大量の要素を追加する場合や、要素が増減する機会が多いUIでは、イベント委譲を活用することでコードをスッキリ保てる場合もあります。

ただし、初心者のうちは、まずはシンプルに追加した要素ごとにイベントを設定する方法を習得すると良いでしょう。

他のライブラリやフレームワークとの関連

JavaScriptで要素を追加する処理は、ReactやVueなどのフレームワークを用いた開発においても重要な基礎になります。

これらのフレームワークを使うと、一見DOM操作を直接書く場面は少ないように思えるかもしれません。

しかし、内部的には同じようにJavaScriptでDOMの増減を制御しており、ユーザーの操作や状態変更に応じて新しい要素を描画しています。

また、フレームワークを使わない状態での開発（いわゆるバニラJS）でも、やはりJavaScript 要素 追加のスキルは欠かせません。

最初は地道にDOM操作の仕組みを理解しておくことで、フレームワークの内部構造や仕組みに対する理解も深まり、実務でのトラブルシュートが容易になります。

フレームワークを使う・使わないに関わらず、DOM操作の基礎はあらゆるフロントエンド開発のベースになる考え方です。

まとめ

ここまで、JavaScript 要素 追加の基本的な考え方や具体的な実装例、実務での注意点を幅広く解説してきました。

要素を追加するためには、単にコードを覚えるだけでなく、DOMの構造やブラウザの再描画に関する仕組みも理解しておくと良いでしょう。

初心者のうちは、「なぜ要素が表示されないのか」「なぜスタイルが思ったように反映されないのか」といった壁にぶつかりやすいかもしれません。

そうしたときこそ、基本に立ち戻ってDOMの流れ（createElement → appendChild → 必要なスタイル・イベント設定）を確認してみると、問題点が見えてきます。

実務では、フォーム送信後のリスト更新や動的メニューの生成など、数え切れないほど多くの場面で要素追加の仕組みが活用されます。

そのため、これをしっかりマスターすれば、より洗練されたUIやインタラクションを実装できるようになるはずです。

ぜひ本記事で紹介した内容を参考にしながら、自分の開発環境で試行錯誤してみてください。

JavaScriptのDOM操作に習熟することで、あなたの作るウェブページが一段と豊かな表現と操作性を持つようになるでしょう。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説