HTML DOM insertBefore() methode
Voorbeeld
Voeg een nieuw <li>-element in vóór het eerste onderliggende element van een <ul>-element:
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>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De methode insertBefore() voegt een knooppunt in als een kind, vlak voor een bestaand kind dat u opgeeft.
Tip: Als u een nieuw lijstitem met tekst wilt maken, vergeet dan niet om de tekst te maken als een tekstknooppunt dat u aan het <li>-element toevoegt en vervolgens <li> in de lijst in te voegen.
U kunt ook de methode insertBefore gebruiken om een bestaand element in te voegen/verplaatsen (zie "Meer voorbeelden").
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
Method | |||||
---|---|---|---|---|---|
insertBefore() | Yes | Yes | Yes | Yes | Yes |
Syntaxis
node.insertBefore(newnode, existingnode)
Parameterwaarden
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 |
Technische details
Winstwaarde: | Een knooppuntobject, dat het ingevoegde knooppunt vertegenwoordigt |
---|---|
DOM-versie | Kernniveau 1 knooppuntobject |
Meer voorbeelden
Voorbeeld
Verplaats een <li>-element van de ene lijst naar de andere:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);