<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">Click the button to replace the first item in the the list</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>First create a new Text node.<br>Then replace the first child node of the first list item.</p>
<p><strong>Note:</strong> This example replaces only the Text node "Coffee" with a Text node "Water", not the entire LI element, which would also be an alternative when replacing nodes.</p>
</body>
</html>