Методи 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>матн1</p>
    <p>матн2</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>матн1</p>
    <p>матн2</p>
  </div>
  <div class="elem">
    <p>матн1</p>
    <p>матн2</p>
  </div>
</div>

Мисол

Бо клони гирифташуда метавон чун элементи оддӣ кор кард:

html<div id="parent">
  <div class="elem">
    <p>матн1</p>
    <p>матн2</p>
  </div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'матни нав1';
clone.children[1].textContent = 'матни нав2';

parent.appendChild(clone);

Натиҷаи иҷрои рамз:

html<div id="parent">
  <div class="elem">
    <p>матн1</p>
    <p>матн2</p>
  </div>
  <div class="elem">
    <p>матни нав1</p>
    <p>матни нав2</p>
  </div>
</div>

Ҳамчунин нигаред