replaceChild()

The replaceChild() method replaces a child node with a new node.

Syntax

node.replaceChild(newnode, oldnode)

Parameters

Parameter Description
newnode Required.
The node to insert.
oldnode Required.
The node to remove.

Return Value

Type Description
Node The replaced node.

removeChild()

The removeChild() method removes an element's child.

Syntax

element.removeChild(node)
         or
node.removeChild(node)

Parameters

Parameter Description
node Required.
The node (element) to remove.

Return Value

Type Description
Node The removed node (element).
null if the child does not exist.


html file 

<!DOCTYPE html>
<html>
<head>
    <title>DOM Navigation</title>
</head>
<body>
    <ul id= "list">
        <li>orange</li>
        <li>Apple</li>
        <li>Grapes</li> 
        <li>Banana</li>
    </ul>
    <script src="js/dom-create.js"></script>
</body>
</html>


dom-create.js 

/*JavaScript ReplaceChild*/

/*var newElement = document.createElement("li");

var newText = document.createTextNode("WOW new Text");

newElement.appendChild(newText);

var target = document.getElementById("list");

var oldElement = target.children[0];*/

//console.log(oldElement);

//target.replaceChild(newElement,oldElement);




/*JavaScript RemoveChild*/

var target = document.getElementById("list");

var oldElement = target.children[1];