innerHTML to właściwość (property) w języku JavaScript, która pozwala pobierać oraz zmieniać zawartość HTML danego elementu na stronie internetowej. Umożliwia zarówno odczyt, jak i dynamiczną zmianę kodu HTML znajdującego się wewnątrz wybranego elementu, włącznie z obsługą zagnieżdżonych tagów HTML, stylów czy nawet skryptów.
Jak działa innerHTML?
innerHTML jest częścią DOM (Document Object Model) – specjalnego interfejsu, dzięki któremu JavaScript może manipulować strukturą strony. Domyślnie każda struktura HTML po załadowaniu do przeglądarki zamieniana jest na odpowiedni schemat obiektów, które można edytować za pomocą skryptów.
- Odczyt – po odwołaniu się do właściwości
innerHTMLotrzymasz ciąg znaków (string), będący zawartością HTML z wnętrza elementu; - Zmiana – przypisanie nowej wartości do
innerHTMLzamienia aktualną zawartość danego elementu na wartość podaną przez programistę – tutaj możesz używać zwykłego tekstu lub tagów HTML.
Przykład użycia – odczyt innerHTML
<p id="example">To jest <strong>ważny</strong> tekst.</p>
<script>
var zawartosc = document.getElementById("example").innerHTML;
// zawartosc = "To jest <strong>ważny</strong> tekst."
</script>
W tym przykładzie zmienna zawartosc będzie zawierała tekst razem z tagiem <strong>.
Przykład użycia – zmiana innerHTML
<p id="result">Początkowa treść paragrafu.</p>
<button onclick="zmienTresc()">Zmień treść</button>
<script>
function zmienTresc() {
document.getElementById("result").innerHTML = 'Nowa <span style="color:red">czerwona</span> treść!';
}
</script>
Po kliknięciu przycisku tekst wewnątrz paragrafu zostanie zastąpiony nową zawartością i pojawi się w nim dodatkowo kolorowany fragment.
Przykład kopiowania kodu HTML pomiędzy elementami
<div id="div1"><b>Ważna</b> treść A</div>
<div id="div2">Treść B z <em>kursywą</em></div>
<button onclick="kopiuj()">Kopiuj zawartość</button>
<script>
function kopiuj() {
document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
}
</script>
Tutaj po kliknięciu przycisku zawartość div2 zostanie skopiowana do div1 – razem z całym kodem HTML.
Różnice – innerHTML, innerText, textContent
| Właściwość | Co zwraca / zmienia |
|---|---|
| innerHTML | Całą zawartość HTML elementu, wraz z tagami HTML. |
| innerText | Tylko widoczny tekst, bez tagów, z uwzględnieniem stylów CSS. |
| textContent | Cały tekst, bez tagów, bez stylów CSS. |
Zastosowania innerHTML
- Tworzenie dynamicznych elementów – dodawanie nowych przycisków, formularzy czy akapitów bez przeładowania strony;
- Aktualizacja zawartości na żądanie – wyświetlanie wyników wyszukiwania, dodawanie produktów do koszyka, aktualizacja liczników;
- Kopiowanie i przenoszenie struktury HTML między elementami.
- Wykonywanie prostych efektów i mechanizmów interakcji z użytkownikiem.
Bezpieczeństwo – na co uważać?
Użycie innerHTML wiąże się z potencjalnym ryzykiem ataków XSS (Cross-site Scripting), jeśli do wnętrza elementu wstawiamy niezaufane dane, np. pochodzące od użytkowników lub z zewnątrz. Zawsze należy filtrować i odpowiednio zabezpieczać dane podawane do innerHTML, by nie dopuścić do wstrzyknięcia złośliwego kodu.
Podsumowanie
innerHTML to jedno z podstawowych narzędzi JavaScript do dynamicznej manipulacji treścią HTML. Dzięki niej twórcy stron mogą tworzyć interaktywne aplikacje bez konieczności przeładowywania całej strony. Jej poprawne i bezpieczne stosowanie pozwala elastycznie i wygodnie sterować wyświetlaną zawartością.
