jQuery Snippets: outerHTML

Sunday, June 17, 2007

Internet Explorer provides an interesting property called outerHTML. The outerHTML property returns the HTML that composes the whole element, unlike innerHTML which returns the HTML that composes of what is inside the element. None of the other browsers implemented this non-standard property but it can be useful sometimes. So here is a cross browser implementation of outerHTML using jQuery.

jQuery.fn.outerHTML = function() {
    return $('<div>').append( this.eq(0).clone() ).html();
};

The way it works is to take the first matched element in the jQuery collection, clone it, append that clone to a newly created div and return that div’s html.

You can download the source code and see an example here.

Posted in jQuery with 13 comments

Comments

but u can not use this function to set the outerHTML content, right? how can i replace the outerhtml content ?

By zeal on Sunday, June 24, 2007 at 12:00 AM

Nice technique man!! This helped me out when I wanted the html of a cloned element.

By Vijay Santhanam on Monday, June 25, 2007 at 06:33 AM

Hey zeal,

Just use the replace snippet I posted not too long ago. You can pass it HTML if you needed too.

$('#myElement').replace('<div><p>test</p></div>');

And the outerHTML snippet could be modified to be a setter also by implementing the replace snippet.

By Brandon Aaron on Monday, June 25, 2007 at 06:33 AM

how could we retrieve the outherHTML for a tag?

By Sylvain Pointeau on Tuesday, May 13, 2008 at 02:08 PM

for the tag tr (table row) ?

By Sylvain Pointeau on Tuesday, May 13, 2008 at 02:09 PM

Sylvain, You just need to select the tr you want and then call .outerHTML() on it.

$('tr').outerHTML();

By Brandon Aaron on Tuesday, May 13, 2008 at 02:13 PM

it works with JQuery >= 1,2.3 thanks.

By Sylvain Pointeau on Thursday, May 22, 2008 at 08:01 AM

genius! Thanks..

By nick on Tuesday, October 28, 2008 at 12:09 AM

Thanks for the snippet!

By the way, if the element exists inside a different document, such as an iframe, this will fail with a permissions error in IE because you are trying to append an element from one document (the iframe’s document) onto another (the ownerDocument of the div that you just created).

This could be fixed with:

return $('<div>', this[0].ownerDocument).append( this.eq(0).clone() ).html();

By Brian Grinstead on Monday, June 15, 2009 at 03:23 PM

I realized that the updated snippet will cause an error if the element does not exist. This fixes it:

var doc = this[0] ? this[0].ownerDocument : document;
return $('<div>', doc).append( this.eq(0).clone() ).html();

By Brian Grinstead on Monday, June 15, 2009 at 03:30 PM

Included script tags are missing!

BEFORE:

<div id="myId">
    <script>myMethod();</script>
    <p>some text</p>
    </div>

AFTER:

<div id="myId">

    <p>some text</p>
</div>

By Max on Wednesday, July 22, 2009 at 12:10 PM

jQuery moving script tags is frustrating! jQuery does this during the .append(). I’ve created a modified version of jquery.outerhtml.js that uses non-jQuery javascript to manipulate the node. This is working for me but I’m sure it can be improved upon further. Anyway, I’m posting it here in case its of use to anyone: 

(function($) {
    $.fn.outerHTML = function(s) {
        var p = document.createElement('p');
        var c = this.eq(0).clone();
        p.appendChild(c[0]);
        return (s) 
            ? this.before(s).remove() 
            : p.innerHTML;
    }

})(jQuery);

By Al on Wednesday, July 29, 2009 at 10:51 AM

The problem with jQuery moving scripts is identifed as a bug: http://dev.jquery.com/ticket/4801

Theres also a patch on this page which solves the issue

By Al on Wednesday, July 29, 2009 at 12:04 PM

New Comment