cloneNodeメソッド

cloneNodeメソッドは、要素をクローンしてその正確なコピーを取得することを可能にします。このコピーは、その後、prepend、append、appendChild、insertBefore、またはinsertAdjacentElementメソッドを使用してページに挿入できます。

このメソッドはパラメータとしてtrueまたはfalseを受け取ります。trueが渡された場合、要素はすべての属性と子要素を含めて完全にクローンされます。falseの場合、要素自体のみが（子要素なしで）クローンされます。

構文

要素.cloneNode(true または false);

例

クラスelemを持つブロックのコピーを作成し、それを#parentブロックの末尾に挿入します：

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

コード実行結果：

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

例

取得したクローンは通常の要素と同様に操作できます：

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

let parent = document.getElementById('parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

コード実行結果：

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>new text1</p>
		<p>new text2</p>
	</div>
</div>

cloneNodeメソッド

構文

例

例

関連項目