Question

Possible Duplicate:
Use jQuery to change an HTML tag?

I have searched around for a while but haven’t found an answer that quite matches what I am trying to do. I would like to be able to replace part of an html tag without actually replacing everything. For example my HTML…

<a href="">Test</a>

I would like the end result to be something like this…

<test href="">Test</a>

I have tried this… but it just replaces everything…

$("a").replaceWith("<test");

This doesn’t seem to work either…

$("a").find().html("<a").replaceWith("&lt;test");

EDIT:

I don’t think I was very clear with my first part. My end goal is to only replace just part of the tag… For example..

find <a and replace it with <test

……..

I feel like I am heading down the right path but I am not sure where to go from here. Any help is much appreciated. Thanks.

Answer 1

God only knows why you would change your elements into something that is’nt even close to being valid HTML, but here’s how to do it:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};
        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });
        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

$("a").changeElementType('test');

FIDDLE

(Stolen from Andrew Whitakers answer here on SO)

​