replaceChild

replaceChild is a method of the DOM Node interface used to replace an existing child node of a parent with a new node. It takes two arguments: newChild, the node to insert, and oldChild, the existing child to be removed. The method updates the parent's child list by removing oldChild and inserting newChild at the same position, and it returns the node that was removed (oldChild).

Behavior and rules:

- If oldChild is not a child of the node on which replaceChild is called, a NOT_FOUND_ERR is raised.

- If newChild already has a different parent, it is removed from that parent before being inserted.

- If newChild is a DocumentFragment, all of its children are inserted in place of oldChild, and the fragment is emptied.

- The operation may be used with any Node type, including Element, Text, Comment, or DocumentFragment.

Example:

var parent = document.getElementById('container');

var oldChild = parent.firstChild;

var newChild = document.createTextNode('New content');

var removed = parent.replaceChild(newChild, oldChild);

Compatibility:

replaceChild is part of the standard DOM API (DOM Level 2 Core) and is supported in modern browsers, including Chrome, Firefox, Safari, and Edge. It is commonly used to update the DOM without creating and appending nodes from scratch, and it can be combined with Fragment handling for bulk insertions.