Parent Element .replaceChild() / insertBefore() Since: DOM Level 1（1998）

// Replaces a child element with a new element.
parentElement.replaceChild(newElement, oldElement);

// Inserts an element immediately before the specified child element.
parentElement.insertBefore(newElement, referenceElement);

<ul id="list">
	<li id="item1">Item 1</li>
	<li id="item2">Item 2</li>
	<li id="item3">Item 3</li>
</ul>

var list = document.querySelector("#list");

// Use replaceChild() to replace Item 2 with a new element.
var newItem = document.createElement("li");
newItem.textContent = "New Item";
var oldItem = document.querySelector("#item2");
list.replaceChild(newItem, oldItem);

// Use insertBefore() to insert an element before Item 1.
var insertItem = document.createElement("li");
insertItem.textContent = "Prepended Item";
var item1 = document.querySelector("#item1");
list.insertBefore(insertItem, item1);

Running the code above changes the HTML as follows.

<!-- Before -->
<ul id="list">
	<li id="item1">Item 1</li>
	<li id="item2">Item 2</li>
	<li id="item3">Item 3</li>
</ul>

<!-- After replaceChild() -->
<ul id="list">
	<li id="item1">Item 1</li>
	<li>New Item</li>
	<li id="item3">Item 3</li>
</ul>

<!-- After insertBefore() -->
<ul id="list">
	<li>Prepended Item</li>
	<li id="item1">Item 1</li>
	<li>New Item</li>
	<li id="item3">Item 3</li>
</ul>

parentElement.replaceChild() replaces an existing child element with a new element. The first argument is the new element, and the second argument is the existing child element to replace. The replaced old element is returned, so you can reuse it if needed.

parentElement.insertBefore() inserts an element immediately before a specified child element. Unlike parentElement.appendChild(), which can only append at the end, parentElement.insertBefore() lets you insert at any position. Passing null as the second argument appends the element at the end, making it equivalent to parentElement.appendChild().

If you pass an element that already exists in the DOM to either method, it is moved from its original position — not copied. If you need to place the same element in multiple locations, clone it first with element.cloneNode().