[js基礎⑤]インプット要素をコピーする方法

今日はjs基礎の5回目です。
今回のテーマは「要素をコピーする方法」です。

ボタンを押すとinput要素がそのままコピーされるページってありますよね。
今回はその方法について解説します。

コード実装例

下記が実装例です。
「Result」タブから追加ボタンを押すと、要素が複製されます。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

以下は解説です。

①ボタンをクリックで、要素を取得する。
まずはボタンクリックで下記の要素を取得します。

const container = document.getElementById('input-container');
const originalInput = container.querySelector('input');

container＝複製した要素を格納
originalInput＝複製するinput要素を格納

②要素を複製する。
次に要素を複製します。

const clonedInput = originalInput.cloneNode(true); 

cloneNode(true);という部分で複製できます。
(true)の部分で、要素の複製方法が変化します。

true=子要素も含めて全てをコピーする。
false=指定した要素だけをコピーする。

今回はinputだけなのでどちらでも一緒です。
ただもしもspan要素など子要素もある場合を考えると、trueで全てをコピーの方がシンプルだと思います。

以上これで要素を複製する方法について解説しました。

まとめ

今回はcloneNodeを使って、input要素を複製する方法について解説しました。

この記事が誰かの参考になれば幸いです。