appendChildでフォームを追加する【JavaScript】

この記事では、JavaScriptのappendChild()とcreateElement()を使って、inputのフォームを追加していく方法を紹介します。

ToDoリストやお問い合わせフォームなどでもたまに見かける機能ですね。

簡単なデモも紹介します。

応用編として「追加や削除のできるフォームを作る【appendChild・removeChild】」も紹介しています。

appendChildでinputのフォームを追加するデモ

「フォーム追加」というボタンをクリックするとイベントが発火し、createElement()によってinput要素が生成され、appendChild()によって要素追加されるというプログラムを作ってみます。

デモ

サンプルコード

createElement()でinputを生成、typeとid、placeholder情報を加えて、appendChild()で要素を追加しています。

変数iをカウントアップすることで、id名とplaceholder名が連番で追加されるように変更しています。

var i = 1 ;
function addForm() {
  var input_data = document.createElement('input');
  input_data.type = 'text';
  input_data.id = 'inputform_' + i;
  input_data.placeholder = 'フォーム-' + i;
  var parent = document.getElementById('form_area');
  parent.appendChild(input_data);
  i++ ;
}

<div id="form_area">
  <input type="text" id="inputform_0" placeholder="フォーム-0">
</div>
<input type="button" value="フォーム追加" onclick="addForm()">

appendChild()とcreateElement()が重要なポイントです。

この2つについて詳しくは「appendChild()の使い方とデモ」と「createElement()の使い方とデモ」で解説しています。