jQuery: getting current selector's inner html PLUS selector's header (outer html)

Question

Hi all,

Using jQuery, I've got a selector -- call it $('#someDiv1') -- that I'd like to get the inner HTML for, but also the header of the tag as well. So given this HTML structure..

<div id="parentDiv">
    <div id="someDiv1">
        <div id="innerDiv1_1"></div>
        <div id="innerDiv1_2"></div>
    </div>
    <div id="someDiv2">
        <div id="innerDiv2_1"></div>
        <div id="innerDiv2_2"></div>
    </div>
</div>

If I've got the selector $('#someDiv1') in a variable -- call it $someDiv1 -- I'd like to be able to use that variable to get a string that is:

"<div id='someDiv1'>
     <div id='innerDiv1_1'></div>
     <div id='innerDiv1_2'></div>
 </div>"

I thought about just saying $someDiv1.parent().html(), but that would give me the div's sibling(s) as well (someDiv2, etc..). Any ideas? Thanks.

Answer 1

You can try something like this:

$('<div></div>').append($('#someDiv1').clone()).html()

Answer 2

You also try

$('#parentDiv').clone().find("> :not(#someDiv1)").remove().end().html();