Change HTML tag type

Question

Can I replace one HTML element with another?

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?

Answer 1

2018 Update:

Use ChildNode.replaceWith() method. 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 in the this answer.

Answer 2

No. You cannot change the tagName (nodeName) of a DOM node.

You only could create a new node of the wanted type, copy all attributes (and maybe properties) and move the child nodes. Yet you would loose inaccessible things like attached event listeners. This technique is for example used when you want to change the type of an input in IE.

However, there is absolutely no reason to change an a into a div, they have completely different semantics (also behaviour and layout).