Метад cloneNode

Метад cloneNode дазваляе кланаваць элемент і атрымаць яго дакладную копію. Гэтую копію затым можна ўставіць на старонку з дапамогай метадаў prepend, append, appendChild, insertBefore ці insertAdjacentElement.

У параметры метад атрымлівае true альбо false. Калі перададзена true, то элемент клонуецца поўнасцю, разам з усімі атрыбутамі і даччынымі элементамі, а калі false - толькі сам элемент (без даччыных элементаў).

Сінтаксіс

javascriptэлемент.cloneNode(true ці false);

Прыклад

Зробім копію блока з класам elem і ўставім яго ў канец блока #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);

Вынік выканання кода:

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>

Прыклад

З атрыманым клонам можна працаваць як з звычайным элементам:

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

Вынік выканання кода:

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>

Глядзіце таксама