HTML DOM metoda insertBefore()
Przykład
Wstaw nowy element <li> przed pierwszym elementem potomnym elementu <ul>:
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Metoda insertBefore() wstawia węzeł jako dziecko, tuż przed istniejącym dzieckiem, które określisz.
Wskazówka: Jeśli chcesz utworzyć nowy element listy z tekstem, pamiętaj, aby utworzyć tekst jako węzeł Tekst, który dołączasz do elementu <li>, a następnie wstaw <li> do listy.
Możesz również użyć metody insertBefore, aby wstawić/przenieść istniejący element (patrz "Więcej przykładów").
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.
Method | |||||
---|---|---|---|---|---|
insertBefore() | Yes | Yes | Yes | Yes | Yes |
Składnia
node.insertBefore(newnode, existingnode)
Wartości parametrów
Parameter | Type | Description |
---|---|---|
newnode | Node object | Required. The node object you want to insert |
existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null , the insertBefore method will insert the newnode at the end |
Szczegóły techniczne
Wartość zwrotu: | Obiekt węzła, reprezentujący wstawiony węzeł |
---|---|
Wersja DOM | Obiekt węzła poziomu podstawowego |
Więcej przykładów
Przykład
Przenieś element <li> z jednej listy na drugą:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);