Μέθοδος insertBefore() του στοιχείου HTML DOM Element

Ορισμός και χρήση

insertBefore() Η μέθοδος εισάγει υποκείμενο στοιχείο πριν από το υπάρχον υποκείμενο στοιχείο.

Για περισσότερες πληροφορίες:

Μέθοδος appendChild()

Μέθοδος replaceChild()

Μέθοδος removeChild()

Μέθοδος remove()

Ατрибούτο childNodes

Ατрибούτο firstChild

Ατрибούτο lastChild

Ατрибούτο firstElementChild

Ατрибούτο lastElementChild

Επιχείρηση

Παράδειγμα 1

  1. Δημιουργία στοιχείου <li>
  2. Δημιουργία κόμβου κειμένου
  3. Προσθέστε το κείμενο στο στοιχείο <li>
  4. Προσθέστε το στοιχείο <li> πριν από τον πρώτο υποορισμό του <ul>;
const newNode = document.createElement("li");
const textNode = document.createTextNode("Άgua");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Μετακίνηση του τελευταίου στοιχείου από μια λίστα σε μια άλλη λίστα στην αρχή:

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

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Μετακίνηση του τελευταίου στοιχείου από μια λίστα σε μια άλλη λίστα στο τέλος:

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

Δοκιμάστε το προσωπικά

Γλώσσα

element.insertBefore(newnode, existingnode)

ή

node.insertBefore(newnode, existingnode)

Παράμετροι

Παράμετροι Περιγραφή
newnode Απαιτείται. Ο κόμβος που πρέπει να εισαχθεί (στοιχείο).
existingnode

Προαιρετικό. Εισάγετε το νέο κόμβο ως θυγατρικό στοιχείο πριν από το νέο κόμβο.

Αν δεν καθοριστεί, η μέθοδος insertBefore θα εισάγει το newnode στο τέλος.

Αποτελεσματικότητα

Τύπος Περιγραφή
Κόμβος Ο κόμβος που εισάγεται.

Υποστήριξη του περιηγητή

element.insertBefore() Είναι χαρακτηριστικό DOM Level 1 (1998).

Όλοι οι περιηγητές υποστηρίζουν πλήρως το:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη 9-11 Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη