ParentNode#
ParentNode.append()#
Metoda append() dodaje przekazane węzły i/lub łańcuch znakowe (automatycznie zamieniane na węzły tekstowe) za ostatnim dzieckiem w danym węźle.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
parentNode.append(nodes);gdzie poszczególne człony oznaczają:
- parentNode - węzeł będący obiektem kontekstu.
- nodes - referencja do przekazanych węzłów i/lub łańcuchów znakowych (automatycznie zamienianych na węzły tekstowe) dodawanych za ostatnim dzieckiem danego węzłem. Separatorem między wieloma przekazanymi argumentami jest przecinek.
Algorytm wywołania metody append(nodes) nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Niech node będzie wynikiem skonwertowania nodes do węzła.
- Dodaj node do obiektu kontekstu.
Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę append(), nie musi mieć rodzica, i w takiej sytuacji nie wykonane zostaną żadne czynności (bez zgłoszenia jakiegokolwiek błędu).
Analizując dokładnie wszystkie powiązane z metodą append() algorytmy można zauważyć, że przekazane węzły nie mogą istnieć jednocześnie w kilku miejscach drzewa węzłów. Najpierw zostaną usunięte z drzewa węzłów, a następnie wstawione w nowe miejsce drzewa węzłów (z ewentualnym skorygowaniem ich właściciela). Jeśli zależy nam na wstawieniu kolejnych identycznych węzłów należy je 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 appendNode = ul1.getElementsByTagName("li")[1]; // referencja do dodawanego węzła
// Manipulujemy drzewem po upływie 3 s
setTimeout(function(){
ul2.append(appendNode);
}, 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>Na chwilę obecną jedynie przeglądarka Firefox zaimplementowała metodę append().
Metoda append() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[NoInterfaceObject] interface ParentNode { [Unscopable] void append((Node or DOMString)... nodes); }