document操作ステップアップ：要素の追加・削除・編集を学ぼう

TOP

＞

投稿一覧

＞

2025.09.01

1. はじめに

前回の記事では、documentを使ってHTML要素を取得したり、テキストや画像を変更したりする方法を紹介しました。今回はその続きとして、新しく要素を作ってページに追加したり、不要になった要素を削除したりする方法を解説します。このテクニックを使えば、次のような動きを持つWebサイトを作ることができます。

ボタンを押すとリストに新しい項目が増える
コメント欄や入力フォームを動的に追加できる
完了したタスクを削除するToDoリスト

次章から詳しい方法を解説していきます。

2. 要素を新しく作る方法（document.createElement）

JavaScriptでは、document.createElement()を使うことで新しいHTML要素をプログラムから作成することができます。
例を挙げると

JavaScript
const newParagraph = document.createElement("p");
newParagraph.textContent = "新しく作られた段落です！";
console.log(newParagraph);

<p>新しく作られた段落です！</p>

※実行結果は実際にはコンソールに表示されます。
さらに、作成した要素にidやclassといった属性を付与することもできます。

const newDiv = document.createElement("div");
newDiv.textContent = "これは新しいボックスです";
newDiv.id = "box1";          // idを設定
newDiv.className = "blue";   // classを設定

このようにしておけば、あとからCSSでスタイルを当てたり、JavaScriptで再び取得したりすることが可能です。

3. 作った要素をページに追加する

前の章では document.createElement()で新しい要素を作りました。しかし作っただけでは、JavaScriptの中に部品を用意した状態にすぎません。実際にページ上に配置するには、取得した親要素に追加する必要があります。そのときに使うのがappendChild()とinsertBefore()です。

3.1. appendChild()：最後に追加する

最もよくつかうのがappendChild()です。これは指定した要素の最後の子要素として新しい要素を追加します。

HTML
<div id="container">
  <p>最初の段落</p>
</div>

JavaScript
const container = document.getElementById("container");
const newParagraph = document.createElement("p");
newParagraph.textContent = "新しく追加された段落です！";
container.appendChild(newParagraph);

スクリプト実行前

最初の段落

スクリプト実行後

最初の段落

新しく追加された段落です！

※変更があった部分を赤く表示しています。
このように、#containerの中の最後に段落が追加されます。新しいメニュー項目リストに追加したり、コメント欄に新しいコメントを表示するときなどによくつかわれます。

3.2. insertBefore()：好きな位置に追加する

最後に追加ではなく、特定の場所の前に挿入したいときは、insertBefore()使います。

HTML
<ul id="list">
  <li>りんご</li>
  <li>みかん</li>
</ul>

JavaScript
const list = document.getElementById("list");
const newItem = document.createElement("li");
newItem.textContent = "バナナ";

const referenceItem = list.children[1]; // 「みかん」の要素
list.insertBefore(newItem, referenceItem);

スクリプト実行前

りんご
みかん

スクリプト実行後

りんご
バナナ
みかん

※変更があった部分を赤く表示しています。
このようにみかんの前にバナナが追加されました。順序が大切なリストや、記事の途中に広告を差し込みたいときなどに使えます。

4. 要素を削除する

ページ上から不要になった要素を削除したい場合、removeChild()やremove()を使います。例えば、ユーザーがボタンを押したらメッセージを消したいときなどによく使われます。

4.1. removeChild() を使う方法

removeChild()は親要素から子要素を削除するときに使います。削除する要素を親から指定して取り除きます。

HTML
<div id="container">
  <p id="msg">このメッセージを削除します</p>
</div>

JavaScript
const container = document.getElementById("container");
const message = document.getElementById("msg");

// 親から子を削除
container.removeChild(message);

スクリプト実行前

このメッセージを削除します

スクリプト実行後

（何も表示されない）

このように、メッセージが削除されます。

4.2. remove() を使う方法も

最近のブラウザでは、削除したい要素自体に直接remove()を呼び出す方法も使えます。こちらの方がコードが短くシンプルです。

HTML
<p id="msg">この段落を削除します</p>

JavaScript
const message = document.getElementById("msg");

// 自分自身を削除
message.remove();

スクリプト実行前

この段落を削除します

スクリプト実行後

（何も表示されない）

対象がはっきりしているときはremove()を使うと便利です。

5. 要素を置き換える

削除と追加を組み合わせて、ある要素を別の要素に置き換えることもできます。これには replaceChild() を使います。例えば、読み込み中の「ローディング表示」を実際の内容に差し替えるときなどによく使われます。

5.1. replaceChild()の使い方

HTML
<div id="container">
  <p id="old">読み込み中...</p>
</div>

JavaScript
const container = document.getElementById("container");
const oldElement = document.getElementById("old");

// 新しい要素を作成
const newElement = document.createElement("p");
newElement.textContent = "読み込みが完了しました！";

// 古い要素を新しい要素に置き換え
container.replaceChild(newElement, oldElement);

スクリプト実行前

読み込み中…

スクリプト実行後

読み込みが完了しました！

※変更があった部分を赤く表示しています。
このように、古い段落が新しい段落に置き換わりました。