当.parentNode 导致错误时，将一个 DOM 元素替换为另一个 DOM 元素

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();