innerHTML w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym jest innerHTML?

innerHTML to właściwość elementu DOM w JavaScript, która pozwala odczytać lub zmienić zawartość HTML znajdującą się wewnątrz danego elementu.

Najczęściej używa się jej po wcześniejszym pobraniu elementu ze strony, np. metodą document.getElementById().

Przykład użycia

<p id="komunikat">Stary tekst</p>

<script>
  const element = document.getElementById("komunikat");
  element.innerHTML = "Nowa treść";
</script>

Po wykonaniu skryptu zawartość akapitu zmieni się z Stary tekst na Nowa treść.

Wstawianie znaczników HTML

innerHTML może wstawiać nie tylko zwykły tekst, ale również znaczniki HTML:

element.innerHTML = "<strong>Ważny komunikat</strong>";

Efektem będzie pogrubiony tekst, ponieważ przeglądarka zinterpretuje znacznik <strong>.

Ważne na egzaminie

Jeżeli pytanie brzmi: „Jaką właściwość zastosować, aby zmienić zawartość elementu?”, poprawną odpowiedzią jest zwykle:

element.innerHTML = "nowa zawartość";

Niepoprawne są nazwy typu innerBody, HTML czy Body, ponieważ nie są właściwościami służącymi do zmiany zawartości pobranego elementu.

Uwaga bezpieczeństwa

Do danych pochodzących od użytkownika bezpieczniej stosować textContent, ponieważ innerHTML interpretuje kod HTML i może prowadzić do podatności XSS, jeśli dane nie są filtrowane.