jQuery Snippets: outerHTML
June 17th, 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.
June 24th, 2007 at 11:54 pm
but u can not use this function to set the outerHTML content, right?
how can i replace the outerhtml content ?
June 25th, 2007 at 6:33 am
Hey zeal,
Just use the replace snippet I posted not too long ago. You can pass it HTML if you needed too.
And the outerHTML snippet could be modified to be a setter also by implementing the replace snippet.
March 27th, 2008 at 7:44 pm
Nice technique man!!
This helped me out when I wanted the html of a cloned element.
May 13th, 2008 at 2:08 pm
how could we retrieve the outerHTML for a tag ?
May 13th, 2008 at 2:09 pm
for the tag tr (table row) ?
May 13th, 2008 at 2:13 pm
Sylvain, You just need to select the tr you want and then call .outerHTML() on it.
May 22nd, 2008 at 8:01 am
it works with JQuery >= 1,2.3 thanks.