appendChild / removeChild / insertBefore în JavaScript

parinte.appendChild(nod)
parinte.removeChild(copil)
parinte.insertBefore(nod, referinta)
parinte.replaceChild(nou, vechi)

Ce face appendChild / removeChild / insertBefore

Sunt metodele mai vechi ale interfeței Node, încă foarte des întâlnite: appendChild adaugă un nod la sfârșit, insertBefore(nou, referinta) îl adaugă înaintea altui copil (cu null ca referință adaugă la sfârșit), removeChild șterge un copil, iar replaceChild(nou, vechi) înlocuiește unul.

Spre deosebire de append, primesc un singur nod (nu texte) și îl returnează. În cod nou, append, before, remove și replaceWith sunt mai simple.

Parametri

Parametru	Descriere
nod / nou	Nodul adăugat.
referinta / vechi / copil	Un copil existent al părintelui.

Ce returnează

Nodul adăugat, șters sau înlocuit.

Exemple

Exemplul 1: Operațiile pe o listă

<ol id="pasi"><li>Unu</li><li>Trei</li></ol>

<script>
  const pasi = document.getElementById("pasi");
  const li = (t) => Object.assign(document.createElement("li"), { textContent: t });

  pasi.insertBefore(li("Doi"), pasi.children[1]);
  pasi.appendChild(li("Patru"));
  const sters = pasi.removeChild(pasi.firstElementChild);
  pasi.replaceChild(li("TREI"), pasi.children[1]);

  console.log(sters.textContent);
  console.log([...pasi.children].map((x) => x.textContent).join(", "));
</script>

Rezultat în browser

Unu
Doi, TREI, Patru

Greșeli frecvente

• Apelezi removeChild cu un element care nu este copil direct al părintelui și primești NotFoundError. Mai simplu: element.remove().
• Dai un text lui appendChild și primești TypeError. Creează un nod cu document.createTextNode sau folosește append.

Comenzi înrudite

• append / prepend / before / after: Adaugă elemente sau texte la sfârșitul, la începutul, înaintea sau după un element.
• remove / replaceWith / replaceChildren: Șterge un element din pagină, îl înlocuiește cu altele sau înlocuiește tot conținutul unui element.
• document.createElement: Creează un element HTML nou (încă invizibil), pe care îl completezi și apoi îl adaugi în pagină.