jQuery Forum

> So if I have
> <div class="example" id="example10">
> Lorem ipsum <strong>dolor sit amet</strong>.
> </div>
> I need to grab that entire bit as a single string, including the first
> div and it's attributes.
How about the.andSelf() method?
http://docs.jquery.com/Traversing/andSelf

.andSelf returns the jQuery object (well, adds it to the selection and
returns the set). This would be great if there was a jQuery object to
string method of some sort.
My Googling around suggests what I'm looking for is called outerHTML,
which is supported by every major browser but Firefox. What a pain!

Here is the method I've used for this:
$.fn.outerHtml = function()
{
if (this.length)
{
var div = $('<div style="display:none"></div>');
var clone =
$(this[0].cloneNode(false)).html(this.html()).appendTo(div);
var outer = div.html();
div.remove();
return outer;
}
else
return null;
};
The basic idea is to create a hidden div and then append a clone of the
element. This uses the cloneNode method which is supported on the DOM
element by all major browers:
http://www.quirksmode.org/dom/w3c_core.html
cloneNode(false) is used to perform a shallow clone -- there is no need to
dela with events and other similar properties.
This is followed by setting the innerHTML of the clone (since we didn't do a
deep clone).
Finally, get the innerHTML of the outer div, then remove it.
This doesn't disturb the page layout and gets your total HTML.
JK
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Donald @ White Whale
Sent: Friday, December 14, 2007 2:21 PM
To: jQuery (English)
Subject: [jQuery] Getting .html() AND the container element
(Apologies of this double-posts somehow; lots of trouble with Google
Groups earlier, haven't seen the message come up yet, so:)
For an Ajax application I'm working on, I need to POST the HTML
contents of an element including the element itself. So if I have
<div class="example" id="example10">
Lorem ipsum <strong>dolor sit amet</strong>.
</div>
I need to grab that entire bit as a single string, including the first
div and it's attributes.
The only way I can figure to do this is to .wrap() the entire element
in another div, then get the .html() of that wrapper, then remove the
wrapper. This feels clumsy and inefficient for a pretty
straightforward task, and messes with the DOM a bit more than I'd like
(the changes can theoretically mess with the page layout on the
viewer's end). Is there a better way to do this?

Why not just:
$.fn.outerHtml = function(){
return $('<div></div>').append( this[0] || '' ).html();
};
Ariel Flesler

That method will move the element into this new div, which messes up the
DOM. The outerHtml method below clones the element first so the original
stays untouched.
JK
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Flesler
Sent: Friday, December 14, 2007 7:05 PM
To: jQuery (English)
Subject: [jQuery] Re: Getting .html() AND the container element
Why not just:
$.fn.outerHtml = function(){
return $('<div></div>').append( this[0] || '' ).html();
};
Ariel Flesler

@Jeffrey Oops.. silly me, that's true, I didn't realize. :)
Ariel Flesler

Thanks everyone. A version of Jeff's solution works perfectly. (And
sorry if my replies come at odd points in the conversation. I'm stuck
in the new subscriber moderation time warp.)