createTextNode vs innerHTML vs textContent

tilbage til lektionen

Dette materiale er kun tilgængeligt på følgende sprog: English, Español, Français, Italiano, 日本語, 한국어, Русский, Türkçe, Українська, Oʻzbek, 简体中文. Hjælp os med at oversætte til Dansk.

Vi har et tomt DOM-element elem og en streng text.

Hvilken af disse 3 kommandoer vil gøre præcis det samme?

elem.append(document.createTextNode(text))
elem.innerHTML = text
elem.textContent = text

Svar: 1 og 3.

Begge kommandoer resulterer i at tilføje text “som tekst” til elem.

Her er et eksempel:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
  let text = '<b>Tekst</b>';

  elem1.append(document.createTextNode(text));
  elem2.innerHTML = text;
  elem3.textContent = text;
</script>