【JavaScript】HTML要素を複製（コピー）する

複製したいHTML要素に対してcloneNodeメソッドを使うことで、属性やテキストを保持したままHTML要素を複製することができます。

cloneNodeメソッドの戻り値は複製したHTML要素のオブジェクトです。変数に格納することで属性等を編集したり、任意の場所に挿入することで複製したHTMLを表示することが来ます。

パラメータにtrueを指定すると子孫要素を含めて複製することができ、falseを指定すると子孫要素は含まずに自身のみ複製します。

HTML

これを

<div id="moto" class="moto">
  <p>コピー元</p>
</div>

こうしたい

<div id="moto" class="moto">
  <p>コピー元</p>
</div>

<div id="saki" class="saki">
  <p>コピー先</p>
</div>

JavaScript

//複製するHTML要素を取得
const moto = document.getElementById("moto");

//複製
const clone = moto.cloneNode(true);

//複製した要素のidを変更
clone.id = "saki";

//複製した要素のクラス名を変更
clone.className = "saki";

//複製した要素の子孫要素を編集
const paragraph = clone.querySelector("p");
paragraph.textContent = 'コピー先';

//複製したHTML要素を挿入
moto.after(clone);

複製したHTML要素は属性なども元の要素から引き継いでしまうため、id属性のような重複が許されない属性を持つ場合は属性値の変更が必要です。