revision:
The insertBefore() method of the Node interface inserts a node before a reference node as a child of a specified parent node. If the given node already exists in the document, insertBefore() moves it from its current position to the new position. (That is, it will automatically be removed from its existing parent before appending it to the specified new parent.)
This means that a node cannot be in two locations of the document simultaneously.
If the given child is a DocumentFragment, the entire contents of the DocumentFragment are moved into the child list of the specified parent node.
node.insertBefore(newNode, referenceNode)
Parameters:
newNode : required. The node to be inserted.
referenceNod : The node before which "newNode" is inserted. If this is "null", then newNode is inserted at the end of node's child nodes.
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
<script>
// Create the new node to insert
const newNode = document.createElement("span");
// Get a reference to the parent node
const parentDiv = docum
// Begin test case [ 1 ] : Existing childElement (all works correctly)
let sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// End test case [ 1 ]
// Begin test case [ 2 ] : childElement is of Type undefined
sp2 = undefined; // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
// End test case [ 2 ]
// Begin test case [ 3 ] : childElement is of Type "undefined" (string)
sp2 = "undefined"; // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Generates "Type Error: Invalid Argument"
// End test case [ 3 ]
</script>
The insertBefore() method inserts a child node before an existing child.
element.insertBefore(new, existing)
Parameters:
new : required. The node (element) to insert.
existing : required. The node (element) to insert before. If "null", it will be inserted at the end.
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<script>
// Create a "li" element:
const newNode = document.createElement("li");
// Create a text node:
const textNode = document.createTextNode("Water");
// Append text node to "li" element:
newNode.appendChild(textNode);
// Insert before existing child:
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);
</script>
Click the button to move items from one list to another:
<div>
<ul id="myList1">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>Milk</li>
<li>Juice</li>
</ul>
<p>Click the button to move items from one list to another:</p>
<button onclick="moveFunction()">Try it</button>
</div>
<script>
function moveFunction() {
const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);
}
</script>
Click the button to move items from one list to another:
<div>
<ul id="myList1_A">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="myList2_A">
<li>Water</li>
<li>Milk</li>
<li>Juice</li>
</ul>
<p>Click the button to move items from one list to another:</p>
<button onclick="moveFunction2()">Try it</button>
</div>
<script>
function moveFunction2() {
const node = document.getElementById("myList2_A").lastElementChild;
const list = document.getElementById("myList1_A");
list.insertBefore(node, null);
}
</script>
<div>
<ul id="menu">
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<script>
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';
// insert a new node before the first list item
menu.insertBefore(li, menu.firstElementChild);
</script>