This content originally appeared on Go Make Things and was authored by Go Make Things
Let’s say you have a h1 element with a greeting, like this.
<h1>Good evening</h1>You want to replace it with a paragraph that says, “Good morning.”
You can use the Node.replaceWith() method to replace an element (and all of its HTML elements and content) with another. Call the Node.replaceWith() method on the target node, and pass in one or more elements or strings as arguments.
// Get the target element
let h1 = document.querySelector('h1');
// Create a new element
let p = document.createElement('p');
p.textContent = 'Good morning';
// Replace the target with the new element
// <p>Good morning</p>
h1.replaceWith(p);
The Node.replaceWith() method can accept more than one element as well as string content as arguments. You could also do something like this.
// You can replace it with more than one item by passing in multiple arguments
// <p>Good morning</p>How are you today?
h1.replaceWith(p, 'How are you today?');
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-04-07T14:30:00+00:00) How to replace an element with vanilla js. Retrieved from https://www.scien.cx/2021/04/07/how-to-replace-an-element-with-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.