Metoda insertBefore() obiektu HTML DOM Element

Definicja i użycie

insertBefore() Metoda wstawia dziecko przed istniejącym dzieckiem.

Zobacz również:

Metoda appendChild()

Metoda replaceChild()

Metoda removeChild()

Metoda remove()

Atrybut childNodes

Atrybut firstChild

Atrybut lastChild

Atrybut firstElementChild

Atrybut lastElementChild

Przykład

Przykład 1

  1. Utwórz element <li>
  2. Utwórz węzeł tekstowy
  3. Dołącz tekst do elementu <li>
  4. Wprowadź element <li> przed pierwszym dzieckiem <ul>:
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Spróbuj sam

Przykład 2

Przenieś ostatni element z jednej listy do początku innej listy:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Spróbuj sam

Przykład 3

Przenieś ostatni element z jednej listy do końca innej listy:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Spróbuj sam

Gramatyka

element.insertBefore(newnode, existingnode)

lub

node.insertBefore(newnode, existingnode)

Parametry

Parametry Opis
newnode Wymagane. Węzeł do wstawienia (element).
existingnode

Opcjonalne. Wstawia nowy węzeł jako podwęzeł przed istniejącym węzłem.

Jeśli nie określono, metoda insertBefore wstawia newnode na końcu.

Zwrócony wartość

Typ Opis
Węzeł Węzeł wstawiony.

Obsługa przeglądarek

element.insertBefore() Jest to funkcjonalność DOM Level 1 (1998).

Wszystkie przeglądarki obsługują to w pełni:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wspierane 9-11 Wspierane Wspierane Wspierane Wspierane