【6日でできるJavaScript入門】要素の追加と削除

　Webページにおいて、動的に要素を追加したり削除したりする機能は、インタラクティブな体験を実現する上で非常に重要です。ここでは、JavaScriptによる「要素の追加」と「要素の削除」の基本を学びます。

１．要素の追加

　HTMLの既存要素に、新しい子要素や前後に要素を動的に挿入するには、insertAdjacentHTML() を使います。

1.1. insertAdjacentHTML() の使い方

構文説明
要素.insertAdjacentHTML(position, htmlString)position 位置に htmlString を挿入
position に指定できる文字列挿入位置を表す：beforebegin, afterbegin, beforeend, afterend

1.2. サンプル：東日本ツアーから西日本ツアーへの切替と追加

ファイル名： lesson11-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🗾 ツアー日程の追加</title>
  <style>
    #schedule { padding: 0; list-style: none; }
    #schedule li { margin-bottom: 5px; }
    #more { color: blue; cursor: pointer; text-decoration: underline; }
  </style>
</head>
<body>
  <h1>🗾 東日本ツアー日程</h1>
  <ul id="schedule">
    <li>仙台（10/2）</li>
    <li>東京（10/4）</li>
    <li>横浜（10/6）</li>
    <li>新潟（10/8）</li>
  </ul>
  <span id="more" onclick="addWestTours()">西日本ツアーも見る</span>
  <script>
    const westTours = ['大阪（10/12）','京都（10/14）','神戸（10/16）','広島（10/18）'];

    function addWestTours() {
      const ul = document.getElementById('schedule');
      // 西日本ツアー日程を末尾に順次追加
      westTours.forEach(city => {
        ul.insertAdjacentHTML('beforeend', `<li>${city}</li>`);
      });
    }
  </script>
</body>
</html>

ブラウザの出力例

  1. ページロード時は東日本のみ表示
  2. "西日本ツアーも見る" をクリック → 西日本4都市がリスト末尾に追加される

コード解説

  • ul.insertAdjacentHTML('beforeend', '<li>…</li>')： <ul> の最後に <li> を追加
  • テンプレートリテラルで動的にHTML文字列を生成
  • forEach で複数要素を順に処理

1.3. 追加位置の指定方法

position説明
beforebegin要素自身の直前
afterbegin要素内の最初の子要素として挿入
beforeend要素内の最後の子要素として挿入
afterend要素自身の直後

1.4. 追加時の注意点

  • 複数回クリックすると重複して同じ要素が追加される
  • 事前にフラグを立てたり、ボタン自体を削除したりして重複を防止する必要あり

２．要素の削除

不要になった要素をDOMから取り除くには、remove() メソッドを使います。

2.1. remove() の使い方

構文説明
element.remove()その要素を親ノードから完全に削除

2.2. サンプル："西日本ツアーも見る"ボタンの削除で重複防止

ファイル名： lesson11-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>❌ ボタン削除サンプル</title>
  </head>
  <style>
    #schedule { padding: 0; list-style: none; }
    #schedule li { margin-bottom: 5px; }
    #more { color: blue; cursor: pointer; text-decoration: underline; }
  </style>
<body>
  <h1>🗾 東日本ツアー日程</h1>
  <ul id="schedule">
    <li>仙台（10/2）</li>
    <li>東京（10/4）</li>
    <li>横浜（10/6）</li>
    <li>新潟（10/8）</li>
  </ul>
  <span id="more" onclick="addWestTours()">西日本ツアーも見る</span>
  <script>
    const westTours = ['大阪（10/12）','京都（10/14）','神戸（10/16）','広島（10/18）'];
    function addWestTours() {
      const ul = document.getElementById('schedule');
      westTours.forEach(city => ul.insertAdjacentHTML('beforeend', `<li>${city}</li>`));
      // ボタンを削除して二度押しを防止
      document.getElementById('more').remove();
    }
  </script>
</body>
</html>

動作

  • 初回クリックで西日本ツアー追加＋"西日本ツアーも見る"ボタンを消去
  • 2回目以降は追加処理が発生しない

ブラウザの出力例

まとめ

ここでは、

  • insertAdjacentHTML() による動的な要素追加
  • 追加位置（beforebegin, afterbegin, beforeend, afterend）の指定
  • 追加時の重複防止策
  • remove() による要素削除 とその利用例

を学びました。これらを駆使して、よりリッチでインタラクティブなWeb UIを構築しましょう。