document.
Tworzy nowy element HTML o podanej nazwie znacznika, gotowy do wstawienia na stronę.
- Zwraca
- Nowy element (
HTMLElement), jeszcze niepodłączony do dokumentu.
Przykład
#const list = document.querySelector('#tasks')
const item = document.createElement('li')
item.textContent = 'Rozwiąż quiz'
item.classList.add('new')
console.log(item.isConnected)
list.append(item)
console.log(item.isConnected)
console.log(list.lastElementChild)
console.log(list.children.length)Definicja i zastosowanie
#Metoda document.createElement() tworzy nowy, pusty element, np. li, div czy button. Na razie istnieje on tylko w pamięci: nie widać go na stronie, dopóki nie wstawisz go do dokumentu metodą append(), prepend(), before() albo after().
Zanim dodasz element, możesz go przygotować: ustawić tekst przez textContent, klasy przez classList, atrybuty przez setAttribute() lub właściwości (id, href, type), a także podpiąć obsługę zdarzeń. Takie budowanie jest bezpieczniejsze niż sklejanie HTML w napisie, bo tekst nigdy nie zostanie potraktowany jak kod.
Przy dodawaniu wielu elementów naraz przekaż je wszystkie do jednego wywołania append() albo zbierz w DocumentFragment. Przeglądarka zaktualizuje wtedy stronę jeden raz zamiast wielu.
Składnia
#document.createElement(tagName)Parametry
#tagName
napis
Nazwa znacznika, np."li","button"albo"img". Wielkość liter nie ma znaczenia.
Więcej przykładów
#const button = document.createElement('button')
button.type = 'button'
button.textContent = 'Pokaż podpowiedź'
button.addEventListener('click', () => console.log('Podpowiedź: użyj pętli for...of'))
document.querySelector('#toolbar').append(button)
button.click()const players = [
{ name: 'Ania', points: 320 },
{ name: 'Kuba', points: 280 },
{ name: 'Ola', points: 250 }
]
const items = players.map((player) => {
const li = document.createElement('li')
li.textContent = `${player.name}: ${player.points} pkt`
return li
})
document.querySelector('#ranking').append(...items)
console.log(document.querySelectorAll('#ranking li').length)
console.log(document.querySelector('#ranking li').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
#- Nowy element nie pojawi się na stronie, dopóki go nie wstawisz, np. przez
append(). - Tekst ustawiaj przez
textContent. Nie musisz wtedy martwić się o znaki specjalne ani o bezpieczeństwo. - Wiele elementów wstaw jednym wywołaniem
append(...elementy), zamiast dodawać je po jednym w pętli.
Powiązane hasła
#- Element.append()Dodaje elementy lub tekst na końcu zawartości elementu.
- Node.textContentOdczytuje lub ustawia cały tekst elementu, bez znaczników HTML.
- Element.classListObiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.
- Element.setAttribute()Ustawia wartość atrybutu HTML elementu albo dodaje nowy atrybut.
- Element.innerHTMLOdczytuje lub zastępuje zawartość elementu w postaci kodu HTML.
Widzisz błąd albo brakuje przykładu? Napisz do nas.