HTML DOM Element replaceChild()

const newNode = document.createTextNode("Water");
const element = document.getElementById("myList").children[0];

element.replaceChild(newNode, element.childNodes[0]);

// Create a new <li> element:
const element = document.createElement("li");

// Create a new text node:
const textNode = document.createTextNode("Water");

// Append the text node to the <li> element:
element.appendChild(textNode);

// Get the <ul> element with id="myList":
const list = document.getElementById("myList");

// Replace the first child node with the new <li> element:
list.replaceChild(element, list.childNodes[0]);