0

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("&lt;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.

Community
  • 1
  • 1
Kris Hollenbeck
  • 15,389
  • 18
  • 62
  • 95

2 Answers2

2

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)

​

Community
  • 1
  • 1
adeneo
  • 293,187
  • 26
  • 361
  • 361
  • I don't intend for the tag to actually say "test" that was just an example. However, thanks for the answer. I will take a look at it and see if I can make it work with what I am doing. I noticed your example changes the closing tag to, whereas I am only looking to change just the opening tag right now. But again thanks for the answer, I will see if I can get it to work with what I am trying to do. – Kris Hollenbeck Aug 15 '12 at 16:54
  • Can't be done, or it probably can but the browser will autoclose the tag anyway. Here's a [FIDDLE](http://jsfiddle.net/Ed3Ck/1/) that changes just the html string and puts it back with a `test` opening tag and an `a` closing tag, just like you want, but if you check in the console the browser will probably try to fix your foolishness and add the correct tags anyway, and doing it this way the element looses any attributes that are attached to it. – adeneo Aug 15 '12 at 17:10
  • Could you post your comment as an answer and I will accept that as my answer .. thanks – Kris Hollenbeck Aug 15 '12 at 17:14
  • No need to post another answer, you can accept this one as the comments will still be here for anyone trying to do the same thing, and for those trying to change the tags the above is the way to do it, as it keeps the attached attributes related to the element. – adeneo Aug 15 '12 at 17:37
2

Here's how to do it with .unwrap() and .wrap()

$('a') // select the element
.contents()  //  traverse to contents
.unwrap()  // unwrap - remove parent tag - which happens to be the a
.wrap('<test href="">')  //  wrap contents with test tag

http://jsfiddle.net/wirey00/mVWfp/

wirey00
  • 32,479
  • 7
  • 49
  • 64