`document.createElement` în JavaScript

Creează un element HTML nou (încă invizibil), pe care îl completezi și apoi îl adaugi în pagină.

Sintaxă

document.createElement(eticheta)
document.createTextNode(text)
document.createComment(text)

Ce face `document.createElement`

createElement("div") creează un element gol, care nu apare în pagină până nu îl adaugi cu append, prepend, before sau after. Între timp îi poți seta textul, clasele, atributele și ascultătorii de evenimente.

createTextNode creează un nod de text, iar createComment un comentariu HTML. Crearea elementelor astfel este sigură față de XSS, spre deosebire de innerHTML cu texte venite de la utilizator.

Parametri

Parametru	Descriere
`eticheta`	Numele etichetei HTML, de exemplu `"li"` sau `"button"`.

Ce returnează

Elementul nou.

Exemple

Exemplul 1: O listă construită din date

<ul id="orase"></ul>

<script>
  const lista = document.getElementById("orase");
  for (const oras of ["Iași", "Cluj", "Timișoara"]) {
    const li = document.createElement("li");
    li.textContent = oras;
    li.classList.add("oras");
    lista.append(li);
  }
  console.log(lista.outerHTML);
</script>

Rezultat în browser

<ul id="orase"><li class="oras">Iași</li><li class="oras">Cluj</li><li class="oras">Timișoara</li></ul>

Exemplul 2: Un buton cu eveniment, text și comentariu

const buton = document.createElement("button");
buton.type = "button";
buton.textContent = "Adaugă în coș";
buton.addEventListener("click", () => console.log("adăugat"));
document.body.append(document.createComment("buton generat"), buton, document.createTextNode(" (stoc limitat)"));

buton.click();
console.log(document.body.lastChild.nodeType, document.body.lastChild.textContent);