Node#
Node.appendChild()#
Metoda appendChild() dodaje przekazany węzeł za ostatnim dzieckiem w danym węźle i zwraca referencję do przekazanego węzła.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var other = node.appendChild(other);gdzie poszczególne człony oznaczają:
- other - referencja do dodawanego węzła.
- node - węzeł będący obiektem kontekstu.
- other - referencja do dodawanego węzła.
Algorytm wywołania metody appendChild(other) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Zwróć wynik dodawania other do obiektu kontekstu.
Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę appendChild(), nie musi być rodzicem ani nawet przodkiem dla przekazanego węzła (choć może), w przeciwieństwie do innych metod modyfikujących zawartość węzłów, np. Node.insertBefore(), Node.removeChild() czy Node.replaceChild(), dla których taki wymóg istnieje.
Analizując dokładnie wszystkie powiązane z metodą appendChild() algorytmy można zauważyć, że przekazany węzeł nie może istnieć jednocześnie w kilku miejscach drzewa węzłów. Najpierw zostanie usunięty z drzewa węzłów, a następnie wstawiony w nowe miejsce drzewa węzłów (z ewentualnym skorygowaniem jego właściciela). Jeśli zależy nam na wstawieniu drugiego identycznego węzła należy go najpierw sklonować i dopiero dołączyć do konkretnego drzewa węzłów. Trzeba pamiętać, że kopia nigdy nie będzie zsynchronizowana z oryginałem (są to dwa osobne obiekty), każda zmiana oryginału nie będzie miała żadnego wpływu na wykonaną kopię.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");
var newChild = ul1.getElementsByTagName("li")[1]; // referencja do nowego dziecka
// Manipulujemy drzewem po upływie 3 s
setTimeout(function(){
var ref = ul2.appendChild(newChild); // referencja do nowego dziecka po jego dodaniu, to samo co newChild
var nextChild = document.createElement("li"); // kolejne nowe dziecko
nextChild.textContent = ref; // wartością tekstową uzyskaną po automatycznej konwersji ref będzie [object HTMLLIElement]
ul2.appendChild(nextChild);
}, 3000);
}
</script>
</head>
<body>
<p>Lista 1</p>
<ul id="ul1">
<li><a href="">Pierwszy odsyłacz</a></li>
<li><a href="">Drugi odsyłacz</a></li>
</ul>
<p>Lista 2</p>
<ul id="ul2">
<li><a href="">Pierwszy odsyłacz</a></li>
</ul>
</body>
</html>Składnia Web IDL#
interface Node : EventTarget { Node appendChild(Node other); }