#    
## Overview
In this shot, we will learn how to replace a child element with a newly created child element.

The **`replaceChild()`** method replaces the old child element with a new one.

## Parameters
The method takes two parameters:

1. The reference of the new child node.
2. The present or old child node that will be replaced in the document. 

## Code
Let's write a code to replace a list item with a newly created item.

<!DOCTYPE html>
<html>
<body>

<ul id="list"><li>NODE 1</li><li>NODE 2</li><li>NODE 3</li></ul>

<p>To replace the first item in the the list, click the button.</p>

<button onclick="change()">CLick Here</button>

<script>
function change() {
  var newnode = document.createTextNode("New Node");
  var firstLi = document.getElementById("list").childNodes[1];
  firstLi.replaceChild(newnode, firstLi.childNodes[0]);
}
</script>

</body>
</html>


codemirror

#    
## Explanation

* In line 5, we have a `ul` element (unordered list) with 3 `li` (list items) inside it.
* In line 7, we include a paragraph tag to display text.
* In line 9, we write a button tag with a `change()` function that will be called when the user clicks on it.

* In line 12, we write the JavaScript code in the script tag. We define a `change()` function that will be called when a user clicks on the button from the HTML page.

* In line 13, we use `createTextNode()` to create a new text node; this node will be replaced with the list item. 
* In line 14, we use `getElementById()` to select the `ul` list and then use `childNodes[1]` to select the second list item. To select the first `li`, replace `1` with `0` in the `childNodes` array.
* In line 15, we replace the new text node with the present text node in the second `li` of the list. We apply the `replaceChild()` method on the list element. The first parameter is the new text node (`newnode`) and the second parameter is the old or present text node (`firstLi.childNodes[0]`). `firstLi.childNodes[0]` returns the first text node in the `li` and replaces it.

## Output

When we click the button, the second `li` list item is replaced with the new text node.

What is the DOM replaceChild() method?

The replaceChild() method replaces an existing child element with a new one using two specified parameters.