HTML要素.cloneNode()対応: DOM Level 1（1998）

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

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

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

<ul id="list">
	<li class="item">項目1</li>
</ul>

var list = document.querySelector("#list");
var original = document.querySelector(".item");

// 子要素を含めて複製し、リストに追加します。
var deepClone = original.cloneNode(true);
deepClone.textContent = "項目2";
list.appendChild(deepClone);

// HTML要素自身のみを複製し、リストに追加します。
var shallowClone = original.cloneNode(false);
shallowClone.textContent = "項目3";
list.appendChild(shallowClone);

上記のコードを実行すると、HTMLは以下のように変化します。

<!-- 実行前 -->
<ul id="list">
	<li class="item">項目1</li>
</ul>

<!-- cloneNode(true) + cloneNode(false) 後 -->
<ul id="list">
	<li class="item">項目1</li>
	<li class="item">項目2</li>
	<li class="item">項目3</li>
</ul>

複製されたHTML要素には元のHTML要素と同じクラス『item』が引き継がれています。

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

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

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