Element.
Parsuje napis jako HTML i wstawia powstałe elementy w wybranym miejscu względem elementu.
- Zwraca
undefined- Zmienia oryginał
- Tak
Przykład
#const chat = document.querySelector('#chat')
chat.insertAdjacentHTML('beforeend', '<li>Kuba: Hej, jak idzie kurs?</li>')
chat.insertAdjacentHTML('afterbegin', '<li class="system">Czat otwarty</li>')
console.log(Array.from(chat.children, (li) => li.textContent))Definicja i zastosowanie
#Metoda insertAdjacentHTML(pozycja, html) zamienia napis na elementy HTML i wstawia je obok elementu albo do jego wnętrza. W przeciwieństwie do przypisania innerHTML nie usuwa istniejącej zawartości, więc stare elementy, ich obsługa zdarzeń i stan zostają nienaruszone.
Pierwszy argument określa miejsce: "beforebegin" przed elementem, "afterbegin" na początku jego wnętrza, "beforeend" na końcu wnętrza i "afterend" za elementem. Pozycje "beforebegin" i "afterend" wymagają, żeby element miał rodzica.
Tak jak przy innerHTML, wstawiany tekst jest interpretowany jako kod. Nie przekazuj do tej metody danych od użytkownika bez oczyszczenia. Do bezpiecznego wstawiania tekstu służy insertAdjacentText(), a gotowych elementów insertAdjacentElement().
Składnia
#element.insertAdjacentHTML(position, html)Parametry
#position
napis
Miejsce wstawienia:"beforebegin","afterbegin","beforeend"albo"afterend".html
napis
Kod HTML do sparsowania i wstawienia.
Więcej przykładów
#const target = document.querySelector('#target')
target.insertAdjacentHTML('beforebegin', '<p>1. beforebegin</p>')
target.insertAdjacentHTML('afterbegin', '<b>2. afterbegin </b>')
target.insertAdjacentHTML('beforeend', '<b> 3. beforeend</b>')
target.insertAdjacentHTML('afterend', '<p>4. afterend</p>')
console.log(target.previousElementSibling.textContent)
console.log(target.textContent)
console.log(target.nextElementSibling.textContent)const feed = document.querySelector('#feed')
const button = document.querySelector('#load')
button.addEventListener('click', () => {
button.insertAdjacentHTML('beforebegin', '<p>Nowy wpis w aktualnościach</p>')
console.log('Wpisów:', feed.querySelectorAll('p').length)
})
button.click()
button.click()
console.log(button.isConnected)Przycisk i jego obsługa kliknięć działają dalej, bo nowe wpisy są dokładane obok, a nie przez przebudowę całej zawartości jak przy innerHTML +=.
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
#- Do dopisywania elementów do listy wybieraj
insertAdjacentHTML("beforeend", html)zamiastinnerHTML +=. Istniejące elementy i ich zdarzenia zostają nietknięte. - Dane od użytkownika wstawiaj przez
insertAdjacentText()albotextContent, nigdy jako HTML. - Nazwy pozycji łatwo zapamiętać: „begin” i „end” to otwierający i zamykający znacznik elementu, a „before” i „after” mówią, po której stronie znacznika trafi nowy kod.
Powiązane hasła
#- Element.innerHTMLOdczytuje lub zastępuje zawartość elementu w postaci kodu HTML.
- Element.append()Dodaje elementy lub tekst na końcu zawartości elementu.
- document.createElement()Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
- Node.textContentOdczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
- Template literalsSzablony tekstowe w odwróconych apostrofach: wstawiają wartości przez ${} i mogą zajmować wiele linii.
Widzisz błąd albo brakuje przykładu? Napisz do nas.