[JavaScript] ボタン押下で動的に要素をコピーし追加

投稿者: | 2021年2月11日

HTMLで表示された入力フォームにて、ボタン押下で動的に、最後の要素をコピーして追加する機能を実装します。

このように、テキストボックス・チェックボックス・ボタンが並んだ要素を、

上段の「Add!」ボタンをクリックすることで、同じ要素が一行追加されます。

ただ追加するだけではなく、値もコピーすることにします。最終行に値を入力して「Add!」ボタンを押すと・・・

値もコピーされて、同じ要素が最下段に追加されます。

手順は次の通りです。

概要

やりたいことの概要を説明します。

id = “add” のボタン要素があり、その次に対象要素をコピー&追加していくdivエリア(id = “target”)が存在しています。

id = “add” のボタンをクリックすると、id = “target” の div 要素内に、その最後の子要素である div 要素をコピーし、

最下部に追加します。

要素の追加対象エリアを取得

要素を追加する対象エリアを取得します。上の構成で言うと、id = “target” の div 要素が該当します。

document.getElementById メソッドで取得可能です。

対象要素をコピー

コピー対象の要素を、cloneNode メソッドでコピーします。

今回は、id = “target” の div エリアにおける最後の子要素をコピーするため、lastElementChild メソッドを使用します。

コピーした要素を追加

最後に、appendChild メソッドでコピーした要素を追加します。

イベントハンドラを設定

今回の例では、id = “add” ボタンをクリックすると要素のコピー&追加を行いますので、該当のボタンにイベントハンドラを設定します。

イベントハンドラには、これまでに実装した一連の機能をセットします。function としてまとめて構成し、イベントハンドラに入れ込みます。

サンプルコード

今回実装した機能を確認する為のサンプルコードを載せておきます。