Node.insertBefore

来源：互联网发布：zblog cms主题编辑：程序博客网时间：2024/05/17 21:26

Node.insertBefore

Summary

Inserts the specified node before a reference element as a child of the current node.

Syntax

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

If referenceElement is null, newElement is inserted at the end of the list of child nodes.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

Example

 <html> <head> <title>Gecko DOM insertBefore test</title> </head> <body> <div>   <span id="childSpan">foo bar</span> </div> <script type="text/javascript"> // create an empty element node // without an ID, any attributes, or any content var sp1 = document.createElement("span"); // give it an id attribute called 'newSpan' sp1.setAttribute("id", "newSpan"); // create some content for the newly created element. var sp1_content = document.createTextNode("This is a new span element. "); // apply that content to the new element sp1.appendChild(sp1_content); var sp2 = document.getElementById("childSpan"); var parentDiv = sp2.parentNode; // insert the new element into the DOM before sp2 parentDiv.insertBefore(sp1, sp2); </script> </body> </html>

There is no insertAfter method, however it can be emulated using a combination of insertBefore and nextSibling.

From the above example, sp1 could be inserted after sp2 using:

parentDiv.insertBefore(sp1, sp2.nextSibling);

If sp2 does not have a next sibling it must be the last child—sp2.nextSibling will return null so sp1 will be inserted at the end of the child nodes list (i.e. immediately after sp2).