Node.
Tworzy kopię węzła. Z argumentem true kopiuje też całą zawartość, czyli wszystkie elementy i teksty w środku.
- Zwraca
- Nowy węzeł, kopię oryginału, jeszcze niepodłączoną do dokumentu.
Przykład
#const list = document.querySelector('#courses')
const original = list.querySelector('.course')
const deep = original.cloneNode(true)
const shallow = original.cloneNode()
deep.querySelector('strong').textContent = 'CSS'
list.append(deep)
console.log(list.children.length)
console.log(original.textContent)
console.log(deep.textContent)
console.log(shallow, shallow.childNodes.length)Definicja i zastosowanie
#Metoda cloneNode() zwraca kopię elementu lub innego węzła. Kopia ma te same atrybuty, klasy i style inline, ale jest nowym, niezależnym obiektem: nie ma jej jeszcze w dokumencie, a zmiany w kopii nie wpływają na oryginał. Żeby ją pokazać, wstaw ją np. przez append().
Argument deep decyduje o zawartości. cloneNode(true) kopiuje element razem ze wszystkimi potomkami i tekstem. cloneNode() bez argumentu (albo z false) tworzy płytką kopię: sam element z atrybutami, ale pusty w środku. W praktyce prawie zawsze potrzebujesz true.
Kopia nie przejmuje obsługi zdarzeń dodanej przez addEventListener() ani własnych właściwości dopisanych do obiektu elementu w JavaScripcie. Kopiowane są za to atrybuty, w tym id, więc po wstawieniu kopii na stronie byłyby dwa elementy o tym samym identyfikatorze. Zmień go albo usuń przed wstawieniem.
Klonowanie często łączy się z elementem <template>: jego zawartość (template.content) kopiujesz przez cloneNode(true), uzupełniasz danymi i wstawiasz na stronę. To wygodny sposób na powtarzalne fragmenty, np. karty kursów.
Składnia
#node.cloneNode()
node.cloneNode(deep)Parametry
#deep
opcjonalny, boolean
truekopiuje węzeł razem z całą zawartością. Domyślniefalse, czyli kopia bez dzieci.
Więcej przykładów
#const button = document.querySelector('#hint')
button.addEventListener('click', () => console.log('Podpowiedź z oryginału'))
const copy = button.cloneNode(true)
copy.id = 'hint-copy'
document.querySelector('#toolbar').append(copy)
copy.click()
button.click()
console.log(copy.id, copy.className)Kliknięcie kopii nic nie wypisuje, bo cloneNode() przenosi atrybuty, ale nie obsługę dodaną przez addEventListener(). Kopia dostała też nowe id, żeby nie powielać identyfikatora.
const template = document.querySelector('#card-template')
const cards = document.querySelector('#cards')
const courses = [
{ title: 'HTML', points: 120 },
{ title: 'CSS', points: 90 }
]
for (const course of courses) {
const card = template.content.cloneNode(true)
card.querySelector('h3').textContent = course.title
card.querySelector('.points').textContent = `${course.points} pkt`
cards.append(card)
}
console.log(cards.children.length)
console.log(cards.querySelector('.card:last-child h3').textContent)Zawartość <template> nie jest wyświetlana na stronie, służy tylko za wzór. Każde cloneNode(true) daje świeżą kopię, którą wypełniamy innymi danymi.
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
#- Prawie zawsze wywołuj
cloneNode(true). Bez argumentu dostaniesz pusty element, bez tekstu i dzieci. - Po sklonowaniu zmień lub usuń
id, żeby na stronie nie było dwóch elementów o tym samym identyfikatorze. - Obsługę zdarzeń podepnij do kopii jeszcze raz albo obsługuj kliknięcia na wspólnym rodzicu (delegowanie zdarzeń).
Powiązane hasła
#- 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ę.
- Element.replaceWith()Zastępuje element w dokumencie innymi elementami lub tekstem. Stary element zostaje usunięty ze strony.
- Element.childrenŻywa kolekcja bezpośrednich dzieci elementu. Razem z parentElement i nextElementSibling służy do poruszania się po drzewie DOM.
- EventTarget.addEventListener()Rejestruje funkcję wywoływaną za każdym razem, gdy na elemencie wystąpi zdarzenie, np. kliknięcie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.