JavaScriptのappendChildメソッドを使うと、子要素を末尾に動的に追加できます。

サンプルコードは以下になります。

ボタンを押すと、boxと書かれた箱が末尾にどんどん追加されていきます。

See the Pen appendChildで子要素を追加する by Makoto Ohnami (@zohnami) on CodePen.

まずはHTMLを見てみましょう。

初期の状態ではcontainerの中にはboxがひとつだけある状態ですね。

<button class="add_button">追加</button>

<div class="container">
  <div class="box">
    もともとあるbox
  </div>
</div>

jsを使って「追加」ボタンを押したときに要素が追加されるようにしていきます。

appendChildは最後に実行しています。

まず最初は追加ボタン(add_button)を取得して、ボタンにクリックイベントを仕込んでいます。

addEventListenerの中身が要素の追加処理になります。

その追加処理の中身はまず前半でcreateElementを使って追加用のタグを生成しています。

後半では追加対象のcontainerを取得し、containerのappendChildを実行して要素を追加しています。

// ボタンを取得
const addButton = document.querySelector('.add_button');

// ボタンのクリックイベントに追加処理を仕込む
addButton.addEventListener('click', () => {
  // 追加用のタブを作成し、boxクラスを適用する。boxの文字列も設定
  const newBox = document.createElement('div');
  newBox.classList.add('box');
  newBox.innerText = '追加したbox';

  // containerを取得して、appendChildを実行して上記のnewBoxを追加
  const container = document.querySelector('.container');
  container.appendChild(newBox);
});

appendChildはよく使いますね。

ただ、jsで追加したものはあくまでも今表示されている画面に限っての更新になります。

そのためブラウザをリロードすると追加した分は消えちゃいます。

追加したものを保持したいときはバックエンド側でデータベースなんかを準備して状態を保持しておく構成になっていくでしょう。

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • さむくなってきた