HTML要素.cloneNode()

// 子要素を含めて複製します。
var clone = element.cloneNode(true);

// HTML要素自身のみを複製します。
var clone = element.cloneNode(false);

複製された新しいHTML要素を返します。この時点ではDOMに追加されていないため、『親HTML要素.appendChild()』などで追加する必要があります。

sample_cloneNode.html

<ul id="list">
	<li class="item">項目1</li>
</ul>
<div id="template-card" class="card" style="display: none;">
	<strong class="card-name"></strong>
	<span class="card-org"></span>
</div>
<div id="card-list"></div>

sample_cloneNode.js

// パターン1: ディープコピーとシャローコピーの違い
var list = document.getElementById("list");
var original = document.querySelector(".item");

// cloneNode(true): 子要素を含めてすべて複製します。
var deepClone = original.cloneNode(true);
deepClone.textContent = "項目2（ディープコピー）";
list.appendChild(deepClone);

// cloneNode(false): HTML要素自身のみを複製します。子要素は含まれません。
var shallowClone = original.cloneNode(false);
shallowClone.textContent = "項目3（シャローコピー）";
list.appendChild(shallowClone);

// パターン2: テンプレートHTML要素を複製してリストを生成する
// display:noneの雛形要素をクローンして使い回します。
var template = document.getElementById("template-card");
var cardList = document.getElementById("card-list");
var members = [
	{ name: "桐生一馬", org: "堂島組" },
	{ name: "真島吾朗", org: "真島組" },
	{ name: "秋山駿",   org: "スカイファイナンス" }
];
members.forEach(function(member) {
	var card = template.cloneNode(true); // 子要素ごと複製します。
	card.style.display = ""; // 非表示を解除します。
	card.removeAttribute("id"); // id の重複を避けるために削除します。
	card.querySelector(".card-name").textContent = member.name;
	card.querySelector(".card-org").textContent = " / " + member.org;
	cardList.appendChild(card);
});

// パターン3: 複製後のid重複に注意する
var original2 = document.getElementById("list");
var clone2 = original2.cloneNode(true);
clone2.id = "list-copy"; // id が重複しないよう必ず変更します。
document.body.appendChild(clone2);

サンプルページはこちら

『HTML要素.cloneNode()』はHTML要素を複製するメソッドです。引数に『true』を指定するとすべての子要素・テキストを含む「ディープコピー」を行い、『false』を指定するとHTML要素自身のみの「シャローコピー」を行います。

複製されたHTML要素には元のHTML要素の属性やクラスがそのまま引き継がれます。ただし『id』属性も複製されるため、ページ内で『id』が重複しないよう注意が必要です。必要に応じて複製後に『HTML要素.setAttribute()』で『id』を変更してください。

『親HTML要素.appendChild()』はすでにDOMに存在するHTML要素を追加すると元の位置から移動してしまいますが、『HTML要素.cloneNode()』で複製した新しいHTML要素を追加すれば、元のHTML要素を残したまま同じ内容を別の場所にも配置できます。