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

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

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

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

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

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

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

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

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

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