Categories
JavaScript Answers

How to change HTML element type with JavaScript?

Spread the love

Sometimes, we want to change HTML element type with JavaScript.

In this article, we’ll look at how to change HTML element type with JavaScript.

How to change HTML element type with JavaScript?

To change HTML element type with JavaScript, we can use the replaceWith method.

For instance, we write:

const parent = document.createElement("div");
const child = document.createElement("p");
parent.appendChild(child);
const span = document.createElement("span");
child.replaceWith(span);

to create a div and p element with createElement.

Then we append child as the child of the parent with appendChild.

Next, we create a span with createElement.

And finally, we call child.replaceWith with span to replace the p element with the span element as the child of the div.

Conclusion

To change HTML element type with JavaScript, we can use the replaceWith method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *