【JavaScript】appendChildの使い方

はじめに

アウトプットが苦手な自分が練習の一環として記事を書いてみる。

第四回目です。

以前にappendChild()を使用して画面にフォームを追加するコードを書いていましたが、
しっかり理解して使っているわけではなかったので備忘録としても
JavaScriptでHTMLの要素を追加するappendChildの使い方について書いていきます。

※今後、新たに分かったことがあれば追記していく。

appendChildとは

appendChild()とは特定の親ノードの子ノードリストの末尾にノードを追加するメソッドです。
※似たようなものでappend()がありますが、あちらはjQueryで書く場合に使用するようです。

使い方

例としてボタンを押下するとテキストボックスが追加されるコードを作成します。
サンプル画面のHTMLになります。

サンプル.html

<div>
  <h2>テキストボックス追加</h2>
    <div>
      <label>ボタンを押下すると↓にテキストボックスを追加する</label>
      <div id="addTextBox">
        <input class="block" type="text" value="テキストボックス1">
      </div>   
    </div>
    <button id="addButton" onclick="addTextBox()">フィールドを追加</button>
</div>

上記の<div id="addTextBox">に子要素としてテキストボックスを追加するようJavaScriptを組んでいきます。

  // 追加する要素を生成する
  var input = document.createElement('input');
  input.type = 'text';
  
  // 親要素を取得
  var parent = document.getElementById('addTextBox');
  
  // 親要素の末尾に追加する
  parent.appendChild(input);

ボタンを押下すると無事に新たなテキストボックスが追加されました。

ボタン押下でHTMLは以下のように変わっていました。

<!-- 実行前 -->
<div id="addTextBox">
  <input class="block" type="text" value="テキストボックス1">
</div>   

<!-- 実行後 -->
<div id="addTextBox">
  <input class="block" type="text" value="テキストボックス1">
  <input type="text" class="block"> <!-- 追加されたテキストボックス -->
</div>

サンプル

See the Pen by tkshiiiir (@tkshiiiir) on CodePen.

参考サイト