Can I change an HTML element's type?

dom, javascript, jquery

Solution

Use the ChildNode.replaceWith() method to create a new node and replace the old node with the new one. As exemplified in MDN docs:

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

child.replaceWith(span);

console.log(parent.outerHTML);
// "<div><span></span></div>"

More information is available in this answer.

Problem

Can I replace one HTML element with another? I want to change an `<a>` to a `<div>`, but I don't want to make the content blank. From: ``` <a data-text="text">content</a> ``` to: ``` <div data-text="text">content</div> ``` Any idea?

Original source

Related problems