Metoden cloneNode

Metoden cloneNode låter dig klona ett element och få en exakt kopia. Denna kopia kan sedan sättas in på sidan med hjälp av metoderna prepend, append, appendChild, insertBefore eller insertAdjacentElement.

I parametern tar metoden emot true eller false. Om true skickas, klonas elementet helt, med alla attribut och underordnade element, och om false - bara själva elementet (utan underordnade element).

Syntax

javascriptelement.cloneNode(true eller false);

Exempel

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

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

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

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

Resultatet av att köra koden:

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

Exempel

Man kan arbeta med den resulterande klonen som med ett vanligt element:

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

javascriptlet 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);

Resultatet av att köra koden:

html<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>

Se även