Element.
Dodaje elementy lub tekst na końcu zawartości elementu.
- Zwraca
undefined- Zmienia oryginał
- Tak
Przykład
#const status = document.querySelector('#status')
const badge = document.createElement('strong')
badge.textContent = 'online'
status.append(' ', badge, ' od 5 minut')
console.log(status.textContent)
console.log(status.innerHTML)Definicja i zastosowanie
#Metoda append() wstawia podane elementy albo napisy jako ostatnie dzieci elementu. Przyjmuje dowolną liczbę argumentów, a napisy zamienia na węzły tekstowe, wstawiane dosłownie, a nie jako HTML.
Jej starszy odpowiednik, appendChild(), przyjmuje tylko jeden węzeł, nie obsługuje napisów i zwraca dodany element. append() nic nie zwraca, ale jest wygodniejsza. Do tej samej rodziny należą prepend() (wstawia na początek), before() i after() (wstawiają obok elementu) oraz replaceWith().
Element może być w dokumencie tylko w jednym miejscu. Jeśli dodasz element, który już jest na stronie, zostanie przeniesiony, a nie skopiowany. Do kopiowania służy element.cloneNode(true).
Składnia
#element.append(node1, node2, …)
element.append(text)Parametry
#node1…nodeN
elementy lub napisy
Węzły albo napisy do dodania na końcu, w podanej kolejności.
Więcej przykładów
#const queue = document.querySelector('#queue')
queue.append(queue.firstElementChild)
console.log(Array.from(queue.children, (li) => li.textContent))const box = document.querySelector('#box')
const paragraph = document.createElement('p')
console.log(box.appendChild(paragraph))
console.log(box.append('tekst'))
console.log(box.childNodes.length)const steps = document.querySelector('#steps')
const first = document.createElement('li')
first.textContent = 'Krok 1'
steps.prepend(first)
steps.after('Gotowe!')
console.log(Array.from(steps.children, (li) => li.textContent))
console.log(steps.nextSibling.textContent)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
#- Kilka elementów dodasz jednym wywołaniem:
append(a, b, c)alboappend(...lista). - Napisy w
append()są wstawiane jako tekst. Jeśli chcesz wstawić kod HTML, użyjinsertAdjacentHTML(). - Dodanie istniejącego elementu przenosi go. Jeśli potrzebujesz kopii, najpierw wywołaj
cloneNode(true).
Powiązane hasła
#- document.createElement()Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
- Element.remove()Usuwa element z dokumentu razem z całą jego zawartością.
- 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.
- Node.textContentOdczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
- Array.prototype.push()Dodaje elementy na koniec tablicy i zwraca jej nową długość.
Widzisz błąd albo brakuje przykładu? Napisz do nas.