I want to get the html including the selector that I am using to get the html

let's say I have

<div id="foo">
  <div id="bar">content</div>
</div>

when I do $('#foo').html() I get

<div id="bar">content</div>

Is there a way in jquery to get the whole html including the parent(selector div)

I want this whole html

<div id="foo">
  <div id="bar">content</div>
</div>

I want to get the html including the selector that I am using to get the html

let's say I have

<div id="foo">
  <div id="bar">content</div>
</div>

when I do $('#foo').html() I get

<div id="bar">content</div>

Is there a way in jquery to get the whole html including the parent(selector div)

I want this whole html

<div id="foo">
  <div id="bar">content</div>
</div>

• javascript
• jquery

• Just to start off with, what about $('#foo').parent().html()? – cha0site Commented Jun 17, 2012 at 10:41
• 1 possible duplicate of Get selected element's outer HTML – Felix Kling Commented Jun 17, 2012 at 10:45

5 Answers 5

You can do:

$('#foo')[0].outerHTML;

DEMO

More Info:

https://developer.mozilla/en/DOM/element.outerHTML

You can also do this with .clone() and .wrap() like

$('#foo').clone().wrap("<div/>").parent().html();

Demo: http://jsfiddle/joycse06/Vy5JW/

Note outerHTML is not supported in firefox < 11.0 You can check that in Browser Compatibility section here https://developer.mozilla/en/DOM/element.outerHTML

So for a failsafe you can use something like following Which takes advantage of outerHTML if available and work across browsers

$foo = $('#foo');
var outerHtml =   ('outerHTML' in $foo[0])? $foo[0].outerHTML 
                                  : $foo.clone().wrap("<div/>").parent().html(); 

Updated Demo http://jsfiddle/joycse06/Vy5JW/1/

You can use the outerHTML property:

$('#foo')[0].outerHTML

In addition to Sarfraz's answer, if you're using jQuery, you can pack it into its own plugin:

(function($) {

    $.fn.outer = function() {

        return $(this)[0].outerHTML;

    };

})(jQuery);
​

Here is a demo: http://jsfiddle/WkH4z/

Try this:

    $('#foo').parent().html();