【コピペ】jsでhtml要素を複製【Javascript】

まず最初に、Javascriptで指定したhtml要素を取得・複製するコードになります。コピペして自由にお使いください。

※cloneNode()による複製はidも丸々コピーされてしまうため、そのまま追加すると同じidを持つ要素が複数存在する状態になってしまうことがあります。
それを避けるために複製版のid属性を削除している行がありますが、id取得でない場合は不要なので削除かコメントアウトして使ってください。

// 複製したい要素をセレクタで取得
let origin = document.querySelector("#id_origin");
// 複製
let elem = origin.cloneNode(true);
// （id取得の場合）id属性を削除
elem.removeAttribute("id"); //id取得でない場合この行を削除
// 指定要素の末尾に複製したノードを追加
document.querySelector("#parent").appendChild(elem);

解説

cloneNode() とは

cloneNode()はノードを複製してくれるメソッドです。
引数にtrueを指定すると子孫を含む複製を返し、falseを指定すると単体の複製を返します。
下の例がわかりやすいかと思います。

<!-- 元になる要素 -->
<p id="id_origin" class="origin">
　　<span class="child">child_1</span>
　　<span class="child">child_2</span>
</p>

<!-- origin.cloneNode(true)で複製 -->
<p class="origin">
　　<span class="child">child_1</span>
  　<span class="child">child_2</span>
</p>

<!-- origin.cloneNode(false)で複製 -->
<p class="origin"></p>

ドキュメントにあるように、複製されたノードはappendChild()などを使用して追加されるまで親ノードがなく、文書にも所属していない状態です。
複製するだけでなく、ノードを必要箇所に追加しましょう。

実際に使ってみる

以下のhtmlとjsで実行してみます。

<!-- 元になる要素 -->
<p id="id_origin" class="origin">
　　<span class="child">child_1</span>
    <span class="child">child_2</span>
</p>

<!-- 追加先の要素 -->
<div id="parent"></div>

// 指定セレクタの要素を取得
let origin = document.querySelector("#id_origin");
// 複製
let elem = origin.cloneNode(true);
// （id取得の場合）id属性を削除
elem.removeAttribute("id"); //id取得でない場合この行を削除
// 指定要素の末尾に複製したノードを追加
document.querySelector("#parent").appendChild(elem);

実行結果

<div id="parent">の中に複製元要素として取得した<p>要素が追加されました。

<!-- 実行結果 -->

    <!-- 元になる要素 -->
    <p id="id_origin" class="origin">
        <span class="child">child_1</span>
        <span class="child">child_2</span>
    </p>

    <!-- 追加先の要素 -->
　　<div id="parent">
　　　　<p class="origin">
 　　       <span class="child">child_1</span>
  　　      <span class="child">child_2</span>
　　　　</p>
　　</div>

まとめ

以上、要素を複製する方法でした。
jsで面白いアニメーション作成をしていたりすると、要素をポンポン増やしてみたい！となったりしますよね。
ぜひコピペ活用して制作活動楽しんでください！

参考ドキュメント

本記事を書く際に参考にしたMDNの関連ドキュメントです。
こちらも併せてご覧ください。

Node.cloneNode() – Web API | MDN　
https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode

Element.removeAttribute() – Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Element/removeAttribute