Is there a jQuery plugin for outerHTML?

Question

I want to overwrite the outerHTML of a few links with the same class name. I just wanted to know if this is not working because jQuery doesn't support .outerHTML. If it does, may you reference it? Also, is there a way to make this work:

$('.t').each(function() {
    $('.t').outerHTML = '<a href="http://www.google.com">' + 
        '<img src="' + $('.t').attr('src') + '" class="' + $('.t').attr('class') + '" /></a>';
});

What is `.t` in this case? Do you mean `.wrap`? http://api.jquery.com/wrap/ — Felix Kling, Sep 07 '11 at 15:06
I think this post may be what you're after: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html. — William Niu, Sep 07 '11 at 15:10
@William: that post refers to getting outer HTML only. This question is looking for a method to set the outer HTML. — Andy E, Sep 09 '11 at 11:07
possible duplicate of [How to use outerHTML in JavaScript?](http://stackoverflow.com/questions/2483429/how-to-use-outerhtml-in-javascript) — Peter O., Jan 12 '12 at 06:29

score 2 · Accepted Answer · edited Apr 18 '20 at 16:53

It looks like you're just trying to wrap an <a> element around each .t. jQuery already has a method for doing this called .wrap

You can read the documentation at https://api.jquery.com/wrap/

An example of usage with your question would be:

$('.t').wrap('<a href="http://google.com">');

If you think you really need to set an element's outerHTML, you might want to try using the snippet I wrote yesterday as an answer to another question. It mimics the behaviour of .html() but allows you to get or set the outerHTML() instead.

score 0 · Answer 2 · edited Sep 07 '11 at 15:32

jQuery offers what you want, just not as a complete 'outerHTML' function:

$('.t').each( function() {
    // Modify the html directly
    $(this).html('<img src="' + $('.t').attr('src') + '" class="' + $('.t').attr('class') + '" /></a>');
    // Use attr to change href
    $(this).attr('href','http://www.google.com');
});

You could also .append() a new $('<img/>') which you have manipulated with .attr() and .addClass() instead of writing out the html string.

score 0 · Answer 3 · answered Jan 10 '12 at 05:41

0

Creating simple outerHTML jQuery plugin:

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);


// usage
$("<p>Hello</p>").outerHTML(); //  "<p>Hello</p>"

answered Jan 10 '12 at 05:41

Maksym Kozlenko

10,273
2
66
55

score -1 · Answer 4 · edited Aug 24 '16 at 07:40

-1

You could use this in your each!

this.outerHTML

To be cross-browser use this jQuery Plugin:

https://github.com/darlesson/jquery-outerhtml

edited Aug 24 '16 at 07:40

Darlesson

5,742
2
21
26

answered Sep 07 '11 at 15:06

binarious

4,568
26
35

Which is not supported in Firefox: http://www.quirksmode.org/dom/w3c_html.html#t05 – Felix Kling Sep 07 '11 at 15:07

Darlesson · Answer 5 · 2020-04-22T19:14:28.913

A new jQuery outerHTML plugin version was release at https://github.com/darlesson/jquery-outerhtml and it seems to do what you want:

    $(".t").each(function(){

        var $this = $(this),
            // Get the attribute values
            src = $this.attr("src"),
            className = $this.attr("class");

        $this.outerHTML("<a href='http://www.google.com'><img src='" + src + "' class='" + className + "' /></a>");

    });

Is there a jQuery plugin for outerHTML?

5 Answers5