`document.createDocumentFragment / importNode` în JavaScript

Construiește multe elemente într-un container invizibil și le adaugă în pagină dintr-o singură mișcare.

Sintaxă

const fragment = document.createDocumentFragment();
document.importNode(template.content, true)

Ce face `document.createDocumentFragment / importNode`

Un DocumentFragment este un container fără element propriu. Adaugi în el oricâte elemente, apoi adaugi fragmentul în pagină: elementele lui sunt mutate acolo, iar fragmentul rămâne gol. Pagina este actualizată o singură dată, nu pentru fiecare element.

document.importNode(nod, true) creează o copie a unui nod din alt document, de exemplu din conținutul unui <template>, ca s-o poți adăuga în pagină. Pentru șabloane din același document, template.content.cloneNode(true) face același lucru.

Ce returnează

Un fragment gol; importNode returnează copia nodului.

Exemple

Exemplul 1: 1000 de rânduri adăugate o singură dată

const fragment = document.createDocumentFragment();
for (let i = 1; i <= 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Produs ${i}`;
  fragment.append(li);
}
console.log(fragment.childNodes.length);

document.querySelector("#produse").append(fragment);
console.log(fragment.childNodes.length, document.querySelectorAll("#produse li").length);

Rezultat în browser

1000
0 1000

Exemplul 2: Un card dintr-un template

<template id="card">
  <article class="card"><h3></h3><p class="pret"></p></article>
</template>

<script>
  const sablon = document.getElementById("card");
  const card = document.importNode(sablon.content, true);
  card.querySelector("h3").textContent = "Căști";
  card.querySelector(".pret").textContent = "199 lei";
  document.body.append(card);
  console.log(document.querySelector(".card h3").textContent);
</script>