Replace a DOM element with another DOM element when .parentNode causing error

Question

Working on replacing DOM under one html page, some nodes give null reference error since they are immediate descendants of document.body . I tried to use document.body.replaceChild(newItem, node); when its parentNode is null, but still got DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node error.

var newItem = document.createElement("SPAN");
newItem.style.backgroundColor = "red";
var textnode = document.createTextNode(node.textContent);
newItem.appendChild(textnode);
if(node.parentElement != null) {
    node.parentElement.replaceChild(newItem, node);
} else {
    document.body.replaceChild(newItem, node);
}

How can I replace(not remove) all the nodes in place?

Answer 1

This can be done without referring to its parentNode by:

node.after(newItem);
node.remove();