- Select the element you wish to replace;
- Create the new element you wish to replace the old one with;
- Use the
Element.replaceWith()method to replace the old element with the new one.
For example, consider the following, which demonstrates this:
// 1: select element you wish to replace const oldElem = document.getElementById('old-element'); // 2: create new element to replace old one with const newElem = document.createElement('h1'); newElem.textContent = 'foobar'; newElem.id = 'new-element'; // 3: replace old element with new one oldElem.replaceWith(newElem);
This code will replace the old element with the new element in the DOM, resulting in an
<h2> HTML element with "
foobar" as its text, and "
new-element" as its
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.