Element.
Zastępuje element w dokumencie innymi elementami lub tekstem. Stary element zostaje usunięty ze strony.
- Zwraca
undefined- Zmienia oryginał
- Tak
Przykład
#const buyButton = document.querySelector('#buy')
const badge = document.createElement('span')
badge.className = 'badge'
badge.textContent = 'Kupiono ✓'
buyButton.replaceWith(badge)
console.log(buyButton.isConnected)
console.log(document.querySelector('.card').lastElementChild)
console.log(document.querySelector('#buy'))Definicja i zastosowanie
#Metoda replaceWith() wstawia podane węzły albo napisy w miejsce elementu, a sam element usuwa z dokumentu. Nowa treść trafia dokładnie tam, gdzie był stary element: ma tego samego rodzica i tych samych sąsiadów.
Przyjmuje dowolną liczbę argumentów, więc jeden element możesz zastąpić kilkoma. Napisy są wstawiane jako zwykły tekst, a nie jako HTML, tak samo jak w append(). Jeśli przekażesz element, który już jest na stronie, zostanie przeniesiony w nowe miejsce.
Zastąpiony element nie znika z pamięci. Dopóki masz do niego odwołanie w zmiennej, możesz go później przywrócić, np. kolejnym wywołaniem replaceWith(). Starszy sposób na to samo to parent.replaceChild(nowy, stary), który wymaga odwołania do rodzica i przyjmuje argumenty w mniej intuicyjnej kolejności.
Składnia
#element.replaceWith(node1, node2, …)
element.replaceWith(text)Parametry
#node1…nodeN
elementy lub napisy
Węzły albo napisy, które zajmą miejsce elementu, w podanej kolejności.
Więcej przykładów
#const status = document.querySelector('#status')
const points = document.createElement('strong')
points.textContent = '340 pkt'
status.replaceWith('ukończono 7 lekcji, ', points)
const paragraph = document.querySelector('p')
console.log(paragraph.textContent)
console.log(paragraph.innerHTML)const title = document.querySelector('#title')
const input = document.createElement('input')
input.value = title.textContent
title.replaceWith(input)
console.log(document.querySelector('#title'))
input.value = 'Notatka o pętlach'
title.textContent = input.value
input.replaceWith(title)
console.log(document.querySelector('#title').textContent)Nagłówek po zastąpieniu nie jest w dokumencie, ale zmienna title nadal go przechowuje. Dzięki temu po edycji wraca na swoje miejsce z nowym tekstem.
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
#replaceWith()wywołujesz na elemencie, który ma zniknąć. Nie potrzebujesz odwołania do rodzica, jak przyreplaceChild().- Napisy są wstawiane jako tekst. Jeśli nowa treść ma być kodem HTML, zbuduj elementy przez
createElement()albo wstaw kod przezinsertAdjacentHTML()i dopiero potem usuń stary element. - Zachowaj odwołanie do starego elementu w zmiennej, jeśli będzie trzeba go przywrócić, np. po wyjściu z trybu edycji.
Powiązane hasła
#- Element.remove()Usuwa element z dokumentu razem z całą jego zawartością.
- 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.cloneNode()Tworzy kopię węzła. Z argumentem true kopiuje też całą zawartość, czyli wszystkie elementy i teksty w środku.
- Element.insertAdjacentHTML()Parsuje napis jako HTML i wstawia powstałe elementy w wybranym miejscu względem elementu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.