`Node.cloneNode / isEqualNode` în JavaScript

Creează o copie a unui element (cu sau fără conținut) și compară două noduri după conținut.

Sintaxă

element.cloneNode(true)
nod.isEqualNode(altNod)

Ce face `Node.cloneNode / isEqualNode`

cloneNode(true) copiază elementul cu tot conținutul lui; cloneNode() (sau false) copiază doar elementul, fără copii. Atributele sunt copiate, dar ascultătorii adăugați cu addEventListener nu. Copia nu este în pagină până nu o adaugi.

isEqualNode verifică dacă două noduri sunt identice ca structură (același tip, atribute și conținut), chiar dacă sunt obiecte diferite. Pentru „același obiect” folosește ===.

Parametri

Parametru	Descriere
`adanc`	Pentru cloneNode: `true` pentru a copia și conținutul.

Ce returnează

cloneNode: copia. isEqualNode: true sau false.

Exemple

Exemplul 1: Copie completă și copie goală

Valoarea scrisă într-un câmp nu este atribut HTML, de aceea ultimul rând dă tot true.

<div class="rand"><input name="telefon"><button>Șterge</button></div>

<script>
  const rand = document.querySelector(".rand");
  const copie = rand.cloneNode(true);
  const gol = rand.cloneNode();

  rand.after(copie);
  console.log(copie.children.length, gol.children.length);
  console.log(copie.isEqualNode(rand), copie === rand);
  copie.querySelector("input").value = "0722";
  console.log(copie.isEqualNode(rand));
</script>

Rezultat în browser

2 0
true false
true

Greșeli frecvente

Clonezi un element cu id și ajungi cu două elemente cu același id în pagină. Schimbă sau șterge id-ul copiei.

Comenzi înrudite

document.createDocumentFragment / importNode: Construiește multe elemente într-un container invizibil și le adaugă în pagină dintr-o singură mișcare.
append / prepend / before / after: Adaugă elemente sau texte la sfârșitul, la începutul, înaintea sau după un element.
structuredClone: Creează o copie completă (în adâncime) a unei valori: obiecte, tablouri, Date, Map, Set.

Ce face Node.cloneNode / isEqualNode