jQuery: how to change tag name?

Question

For example:

$1

I need

$1

Yes, I can

Create DOM element
Copy tr content to div
Remove tr from dom

But can I make it directly?

PS:

    $(tr).get(0).tagName = "div";

results in DOMException.

user_1353510 · Answer

Inspired by ericP answer, formatted and converted to jQuery plugin:

$.fn.replaceWithTag = function(tagName) {
    var result = [];
    this.each(function() {
        var newElem = $('<' + tagName + '>').get(0);
        for (var i = 0; i < this.attributes.length; i++) {
            newElem.setAttribute(
                this.attributes[i].name, this.attributes[i].value
            );
        }
        newElem = $(this).wrapInner(newElem).children(0).unwrap().get(0);
        result.push(newElem);
    });
    return $(result);
};

Usage:

$('div').replaceWithTag('span')

user_3005203 · Answer

Working pure DOM algorithm

function rename_element(node, name) {
    let renamed = document.createElement(name);

    Array.from(node.attributes).forEach(attr => {
        renamed.setAttribute(attr.name, attr.value);        
    })
    while (node.firstChild) {
        renamed.appendChild(node.firstChild);
    }
    node.parentNode.replaceChild(renamed, node);
    return renamed;
}

user_7871100 · Answer

Try this one also. in this example we can also have attributes of the old tag in new tag

var newName = document.querySelector('.test').outerHTML.replaceAll('h1', 'h2');
document.querySelector('.test').outerHTML = newName;

Replace H1 to H2

jQuery: how to change tag name?

18 Answers