<div id="parent"> <div id="child"></div> </div> <script> /** * First way we can replace one element with another is by changing .innerHTML of a parent element **/ document.querySelector("#parent").innerHTML = `<div id="another-child"></div>`; //Result /* <div id="parent"> <div id="another-child"></div> </div> */ /** * Another way is by removing child add adding another child using createElement **/ let parent = document.querySelector("#parent"); let oldChild = document.querySelector("#child"); let newChild = document.createElement("div"); newChild.setAttribute("id", "another-child"); parent.removeChild(oldChild); parent.appendChild(newChild); //Result /* <div id="parent"> <div id="another-child"></div> </div> */ </script>