Element.
Odczytuje lub zastępuje zawartość elementu w postaci kodu HTML.
- Zwraca
- Napis z kodem HTML zawartości elementu.
Przykład
#const menu = document.querySelector('#menu')
console.log(menu.innerHTML)
const items = ['Kursy', 'Ranking', 'Profil']
menu.innerHTML = items.map((item) => `<li>${item}</li>`).join('')
console.log(menu.children.length)
console.log(menu.innerHTML)Definicja i zastosowanie
#Właściwość innerHTML zwraca kod HTML wszystkich dzieci elementu jako napis. Przypisanie nowego napisu usuwa dotychczasową zawartość, a przeglądarka parsuje tekst jako HTML i tworzy z niego nowe elementy.
To wygodny sposób na wstawienie większego fragmentu, np. zbudowanego w template literal. Pamiętaj jednak, że każde przypisanie niszczy stare elementy razem z podpiętą do nich obsługą zdarzeń i tekstem wpisanym w pola formularza. Również innerHTML += przebudowuje całą zawartość od nowa.
Największe ryzyko dotyczy bezpieczeństwa. Wstawienie tekstu od użytkownika przez innerHTML otwiera drogę do ataku XSS: ktoś może przemycić znaczniki z kodem, który uruchomi się na Twojej stronie. Dane z zewnątrz wstawiaj przez textContent albo twórz elementy metodą createElement().
Składnia
#const html = element.innerHTML
element.innerHTML = htmlStringWięcej przykładów
#const box = document.querySelector('#box')
const oldButton = document.querySelector('#buy')
box.innerHTML += '<p>Promocja: 20% taniej</p>'
console.log(document.querySelector('#buy') === oldButton)
console.log(oldButton.isConnected)Po += przeglądarka zbudowała zawartość od nowa. Nowy przycisk wygląda tak samo, ale to inny element, a obsługa zdarzeń podpięta do starego przestała działać.
const greeting = document.querySelector('#greeting')
const userName = '<em>Kuba</em>'
greeting.innerHTML = `Cześć, ${userName}!`
console.log(greeting.querySelector('em') !== null)
greeting.textContent = `Cześć, ${userName}!`
console.log(greeting.querySelector('em') !== null)Przez innerHTML znaczniki z napisu stają się prawdziwymi elementami. textContent pokazuje je jako zwykły tekst, dlatego jest bezpieczny dla danych od użytkownika.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nigdy nie wstawiaj przez
innerHTMLdanych od użytkownika ani z API bez oczyszczenia. Do tekstu używajtextContent. - Unikaj
innerHTML +=w pętli, bo każdy krok przebudowuje całą zawartość. Najpierw zbuduj cały napis albo użyjinsertAdjacentHTML(). - Do wyczyszczenia elementu wystarczy
element.innerHTML = ""alboelement.replaceChildren().
Powiązane hasła
#- Node.textContentOdczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
- Element.insertAdjacentHTML()Parsuje napis jako HTML i wstawia powstałe elementy w wybranym miejscu względem elementu.
- document.createElement()Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
- Template literalsSzablony tekstowe w odwróconych apostrofach: wstawiają wartości przez ${} i mogą zajmować wiele linii.
- Element.append()Dodaje elementy lub tekst na końcu zawartości elementu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.