textContent / innerHTML în JavaScript

element.textContent = "text";
element.innerHTML = "<b>HTML</b>";

Ce face textContent / innerHTML

textContent lucrează cu textul simplu al elementului. Dacă îi dai un text care conține etichete HTML, ele sunt afișate ca text, nu interpretate.

innerHTML interpretează textul ca HTML, deci poți adăuga etichete. Nu îl folosi cu texte venite de la utilizatori: un atacator poate strecura cod JavaScript în pagină (atac XSS).

Ce returnează

La citire, un șir de caractere.

Exemple

Exemplul 1: Diferența dintre cele două

<p id="mesaj">Salut, <b>Ana</b>!</p>

<script>
  const p = document.querySelector("#mesaj");

  console.log(p.textContent);
  console.log(p.innerHTML);
</script>

Rezultat în browser

Salut, Ana!
Salut, <b>Ana</b>!

Exemplul 2: Afișarea sigură a unui comentariu

const comentariu = '<img src="x" onerror="alert(1)">';
const p = document.querySelector("#comentariu");

p.textContent = comentariu;
console.log(p.innerHTML);

Rezultat în browser

<img src="x" onerror="alert(1)">

Greșeli frecvente

• Folosești innerHTML pentru texte din formulare, comentarii sau adrese URL. Folosește textContent.
• Adaugi conținut cu innerHTML += într-o buclă. Tot conținutul elementului este reconstruit la fiecare pas, iar ascultătorii de evenimente de pe elementele vechi se pierd.

Comenzi înrudite

• document.querySelector: Găsește primul element din pagină care se potrivește cu un selector CSS.
• template literals: Șiruri între backtick-uri (`) în care pui variabile și expresii direct în text.
• classList: Adaugă, scoate sau comută clase CSS pe un element.