Czym jest innerHTML?
innerHTML to właściwość elementu DOM w JavaScript, która pozwala odczytać albo zmienić zawartość HTML znajdującą się wewnątrz danego elementu.
Najczęściej używa się jej do dynamicznego wyświetlania tekstu lub znaczników HTML na stronie.
Przykład użycia
<p id="wynik"></p>
<script>
document.getElementById("wynik").innerHTML = "Witaj na stronie!";
</script>
Efekt: w akapicie o identyfikatorze wynik pojawi się tekst Witaj na stronie!.
innerHTML a zwykły tekst
Do innerHTML można przypisać nie tylko tekst, ale też kod HTML:
document.getElementById("wynik").innerHTML = "<strong>Ważne!</strong>";
Przeglądarka zinterpretuje znacznik <strong> i pogrubi tekst.
Ważna uwaga bezpieczeństwa
Nie należy bez kontroli wstawiać do innerHTML danych pochodzących od użytkownika, ponieważ może to prowadzić do ataków XSS, czyli wstrzyknięcia złośliwego kodu JavaScript.
Jeżeli chcesz wstawić wyłącznie tekst, bez interpretowania HTML, bezpieczniejszą alternatywą jest textContent:
document.getElementById("wynik").textContent = "<strong>Tekst</strong>";
W tym przypadku znaczniki zostaną pokazane jako zwykły tekst.