`append / prepend / before / after` în JavaScript

Pagina web (DOM) Browserele moderne (din 2017)

Adaugă elemente sau texte la sfârșitul, la începutul, înaintea sau după un element.

Sintaxă

parinte.append(nod1, "text", ...)
parinte.prepend(...)
element.before(...)
element.after(...)

Ce face `append / prepend / before / after`

append adaugă la sfârșitul conținutului unui element, prepend la început. before și after adaugă lângă element, ca frați (înainte, respectiv după el).

Toate primesc oricâte argumente, iar textele simple devin noduri de text (nu sunt interpretate ca HTML, deci sunt sigure). Un element care există deja în pagină este mutat, nu copiat. Metodele nu returnează nimic.

Parametri

Parametru	Descriere
`noduri`	Elemente, fragmente sau texte.

Ce returnează

undefined.

Exemple

Exemplul 1: Cele patru poziții

<ul id="lista"><li id="b">B</li></ul>

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

  lista.append(li("D"));
  lista.prepend(li("A"));
  b.after(li("C"));
  lista.before("Listă: ");
  console.log([...lista.children].map((x) => x.textContent).join(" "));
  console.log(lista.previousSibling.textContent);
</script>

Rezultat în browser

A B C D
Listă:

Exemplul 2: Un element existent este mutat

const primul = document.querySelector("#lista li");
document.querySelector("#lista").append(primul);
console.log([...document.querySelectorAll("#lista li")].map((x) => x.textContent).join(" "));