JavaScriptでの要素のクローニング

このレッスンでは、要素のコピーを取得する方法を学びます。これらのコピーは、通常の要素と同じように操作できます - 変更したり、ページの必要な場所に挿入したりできます。要素のコピーを取得するプロセスは クローニングと呼ばれます。

要素は、cloneNodeメソッドを使用してクローンできます。このメソッドには trueまたはfalseをパラメータとして渡す必要があります。 trueが渡された場合、要素はすべての属性と子要素を含めて完全にクローンされます。 falseの場合、要素自体のみがクローンされます。

例を見てみましょう。次のようなコードがあるとします:

<div id="parent">
	<div class="elem">
		<p>最初の段落</p>
		<p>二番目の段落</p>
	</div>
</div>

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

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

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

結果は次のようになります:

<div id="parent">
	<div class="elem">
		<p>最初の段落</p>
		<p>二番目の段落</p>
	</div>
	<div class="elem">
		<p>最初の段落</p>
		<p>二番目の段落</p>
	</div>
</div>

入力欄（input）が与えられています。ボタンが与えられています。ボタンがクリックされたとき、この入力欄をクローンしてください。