0

I have mark up like

<div id="div1">
   <div id="div2">
     blah blah
   </div>
</div>

If I use $("#div1").html(), it returns the div#div2. But I want to get the complete html. i.e, along with div#div1.

Is there any way to do this?

Selvaraj M A
  • 3,096
  • 3
  • 30
  • 46
  • Try `$("#div1").parent().html()`. – Furqan Hameedi Jul 10 '12 at 07:52
  • I think the solution you offer is not valid. Imagine div1's parent contains more than a single div, it would return them all, isn't it? – davids Jul 10 '12 at 07:54
  • duplicates this: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html See the solution. – nunespascal Jul 10 '12 at 07:56
  • @loler I tested the outerHTML, it hits the specific div in the selector + children, so this is a targeted approach. See fiddle here: http://jsfiddle.net/HzX75/ – Dexter Huinda Jul 10 '12 at 08:18
  • @DexterHuinda I just said the same. I have not said that it wont help, i've just presented a fact. – loler Jul 10 '12 at 08:47
  • @loler no, you were saying it has the same effect with parent().html() which is not true, because I tested it also. – Dexter Huinda Jul 10 '12 at 09:39
  • @DexterHuinda, you are right only `.parent().html()` will return other children not `.outerHTML`. – loler Jul 10 '12 at 09:51

7 Answers7

3

You could try:

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

EDIT:

The same solution but without using jQuery (better performance):

document.getElementById('div1').outerHTML
davids
  • 6,259
  • 3
  • 29
  • 50
  • Dexter, that would be a working solution as long as #div1 has not siblings. Add another div, sibling of #div1, and check again – davids Jul 10 '12 at 08:09
0

I would say try to select the parent element, or the other way is to do this:

var html = $('<div>').append($('#top').clone()).remove().html();
Stijn_d
  • 1,078
  • 9
  • 20
0

Use .parent():

$("#div1").parent().html();

However this will also get the html for all siblings. You could just wrap div1 in another div... :)

Scotty
  • 2,480
  • 2
  • 16
  • 20
0

.html() returns innerHTML you need outerHTML. this can be helpful.

Community
  • 1
  • 1
loler
  • 2,594
  • 1
  • 20
  • 30
0

Try this : http://jsfiddle.net/96u9c/3/

:) special need function, now you can use it for any purpose of your own.

justtext will get you the only text for parent tag where as inner version will get you children text.

Hope it helps :)

You could very well add this to your common javascript file in project or customize it and use it as a plugin in your project.

code

jQuery.fn.justtext = function() {

    return $(this).clone()
            .children()
            .remove()
            .end()
            .text();

};

jQuery.fn.justtextinner = function() {

    return $(this).clone()
            .children()
            .end()
            .text();

};

alert($('#div1').justtextinner());​
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
0
$("<div />").append($("#div1").clone()).html();

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
0

You could create a simple jQuery plugin that would do the job for you, allowing you to use the native .outerHTML property when it exists, or polyfill it when it doesn't.

(function($) {
  if('outerHTML' in document.createElement('div')) {
    $.fn.outerHtml = function() {
      return this[0].outerHTML;
    }
  }
  else {
    $.fn.outerHtml = function() {
      return $("<div />").append(this.eq(0).clone()).html();
    }
  }
}(jQuery));

An example is at http://jsfiddle.net/steveukx/qUEyp/

steveukx
  • 4,370
  • 19
  • 27