ParentNode#
ParentNode.prepend()#
Metoda prepend() dodaje przekazane węzły i/lub łańcuch znakowe (automatycznie zamieniane na węzły tekstowe) przed pierwszym 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.prepend(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 przed pierwszym dzieckiem danego węzłem. Separatorem między wieloma przekazanymi argumentami jest przecinek.
Algorytm wywołania metody prepend(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.
- Wykonaj przed wstawienie node do obiektu kontekstu przed pierwszym dzieckiem w obiekcie kontekstu.
Warto podkreślić, że węzeł docelowy, na którym wywołujemy metodę prepend(), 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ą prepend() 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 prependNode = ul1.getElementsByTagName("li")[1]; // referencja do dodawanego węzła
// Manipulujemy drzewem po upływie 3 s
setTimeout(function(){
ul2.prepend(prependNode);
}, 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ę prepend().
Metoda prepend() pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
[NoInterfaceObject] interface ParentNode { [Unscopable] void prepend((Node or DOMString)... nodes); }