Kloning av element i JavaScript

I den här lektionen kommer vi att lära oss att få kopior av element. Dessa kopior kan arbetas med som vanliga element - ändra dem och sätta in dem på rätt plats på sidan. Processen för att få kopior av element kallas kloning.

Man kan klona ett element med metoden cloneNode. Till denna metod måste man skicka true eller false som parameter. Om true skickas, klonas elementet helt, tillsammans med alla attribut och underordnade element, och om false - bara själva elementet.

Låt oss titta på ett exempel. Låt oss säga att vi har följande kod:

html<div id="parent">
  <div class="elem">
    <p>första stycket</p>
    <p>andra stycket</p>
  </div>
</div>

Låt oss göra en kopia av blocket med klassen elem och sätta in det i slutet av blocket #parent:

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

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

Resultatet blir följande:

html<div id="parent">
  <div class="elem">
    <p>första stycket</p>
    <p>andra stycket</p>
  </div>
  <div class="elem">
    <p>första stycket</p>
    <p>andra stycket</p>
  </div>
</div>