templateタグを使ってフォームを複製 - Qiita

はじめに 以前、「cloneNode()で入力フォームを複製してみた」という記事で入力フォームをcloneNode()を使って複製する記事を投稿した。 しかしその記事内のコードではフォーム内のテキストまで複製されてしまう。 ここではHTML5より追加されたtemplateタグを使ってフォームのテンプレートを作成し、それを複製することで、何も入力されていないフォームを追加していく。 要件 「追加」ボタンをクリックし、名前、年齢、性別を入力するフォームを複製したい。(最大8人) ⇓ templateタグとは Javascriptで操作するDOM要素をテンプレート化するHTML要素。 templateタグで囲まれた要素は、ページの読み込み時には描画されない。 templateタグの要素を複製する方法 template要素内の内容を複製し、ブラウザに表示するために必要な処理は以下の３つ。 ①tem