How to change a HTML tag using JavaScript

Question

Consider the following code:

var element = document.CreateElement("div");
element.toString(); // [object HTMLDivElement]

var element = document.CreateElement("somerandomtag");
element.toString(); // [object HTMLUnknownElement]

My gut instinct is that once an element has been created, it is essentially "strongly typed" (if such a thing exists in JavaScript), because "div" creates a HTMLDivElement and "somerandomtag" creates a HTMLUnknownElement, thus, the tag cannot be changed, because the created object corresponds directly to that tag.

Consider the following code:

var element = document.CreateElement("div");
element.toString(); // [object HTMLDivElement]

element.nodeName = "span"; // Doesn't work.
element.tagName = "span"; // Doesn't work.

So, is it possible to change an element from one type (e.g. "div") to another type (e.g. "span") beyond the object's creation?

EDIT: Please note...MUST be done with pure javascript...NO jQuery or other libraries/apis

Would replaceChild() not suffice, or are you asking about something else? (This may seem a silly question, but I'm a little flummoxed by your question.) — David Thomas
– David Thomas, Commented Jun 11, 2013 at 10:41
@DavidThomas, I think replaceChild is indeed part of the bigger picture. I need to create a new element (e.g. HTMLSpanElement), copy the old elements content and attributes across and do the replacement. — Matthew Layton
– Matthew Layton, Commented Jun 11, 2013 at 10:57

Explosion Pills · Accepted Answer · 2013-06-11 10:41:17Z

5

An element's tagName is readonly (immutable) no matter what the element is. You cannot change an element's tag name without some rebuilding of the DOM. That is it's not possible to change an existing element, but it's not that difficult to create a new element and append the existing element's children.

var node = document.querySelector('div'),
    newNode = document.createElement('span'),
    parent = node.parentNode,
    children = node.childNodes;

Array.prototype.forEach.call(children, function (elem) {
    newNode.appendChild(elem);
});
parent.replaceChild(newNode, node);

http://jsfiddle.net/ExplosionPIlls/wwhKp/

answered Jun 11, 2013 at 10:41

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change a HTML tag using JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related