cloneNode Metodu

cloneNode metodu, bir elementi klonlamaya ve onun tam bir kopyasını elde etmeye yarar. Bu kopya daha sonra sayfaya prepend, append, appendChild, insertBefore veya insertAdjacentElement metodları kullanılarak eklenebilir.

Metot, parametre olarak true veya false alır. Eğer true ile çağrılırsa, element tüm nitelikleri ve alt elementleriyle birlikte tamamen klonlanır; eğer false ile çağrılırsa - sadece elementin kendisi klonlanır (alt elementler olmadan).

Sözdizimi

javascriptelement.cloneNode(true veya false);

Örnek

elem sınıfına sahip bloğun bir kopyasını yapalım ve onu #parent bloğunun sonuna ekleyelim:

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

Kodun çalıştırılmasının sonucu:

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>

Örnek

Elde edilen klon, normal bir element gibi üzerinde çalışılabilir:

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 = 'yeni text1';
clone.children[1].textContent = 'yeni text2';

parent.appendChild(clone);

Kodun çalıştırılmasının sonucu:

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

Ayrıca Bakınız