This gist replaces an element in the Dom with a newly created element its further explained in the DOD article by Yasir Gaji

replacement.js

const newHeading = document.createElement('h1'); // this creates a new element which in this case a "h1" element

newHeading.appendChild(document.createTextNode('Taking over this space!!')); // assigning a text node to the newly created element

const oldHeading = document.querySelector('li.photo'); // initializing the element to be replaced to a variable

const ulElement = document.querySelector('ul.showcase'); // initializing the parent element

ulElement.replaceChild(newHeading, oldHeading); // THIS REPLACES THE OLD ELEMENT WITH THE NEW ONE