I don't need innerHTML i need innerHTML with enclosing tags. Lets write some example:

<div id="1" style="qwe"><span class="1"></span></div>
<div id="2" style="asd"><span class="2"></span></div>
<div id="3" style="zxc"><span class="3"></span></div>

I can get element by id:

$("#1")

And how can i get string like that:

<div id="1" style="qwe"><span class="1"></span></div>

Of course html() doesn't work becouse it will return only span.

I don't need innerHTML i need innerHTML with enclosing tags. Lets write some example:

<div id="1" style="qwe"><span class="1"></span></div>
<div id="2" style="asd"><span class="2"></span></div>
<div id="3" style="zxc"><span class="3"></span></div>

I can get element by id:

$("#1")

And how can i get string like that:

<div id="1" style="qwe"><span class="1"></span></div>

Of course html() doesn't work becouse it will return only span.

• javascript
• jquery
• dom

• 1 possible duplicate of JQuery Object to String – Madara's Ghost Commented Feb 7, 2012 at 12:50
• possible duplicate of Get selected element's outer HTML – Amar Palsapure Commented Feb 7, 2012 at 12:52
• possible duplicate of stackoverflow.com/questions/2419749/… – bang Commented Feb 7, 2012 at 12:54
• Actually, to select the element with id=1 you would need to use $('#\\31 '), not $('#1'). See mothereff.in/css-escapes#01. – Mathias Bynens Commented Feb 8, 2012 at 21:07

7 Answers 7

you could do something like this:

alert( $('#\\31 ').wrap("<div />").parent().html() )
$('#\\31 ').unwrap()

Something like this should work fine:

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

var outer = $("#1").outerHTML();

Here's a working fiddle.

Additional Info

See http://www.yelotofu.com/2008/08/jquery-outerhtml/ for original article .

Use this jQuery plugin: https://github.com/brandonaaron/jquery-outerhtml/blob/master/jquery.outerhtml.js

/*! Copyright (c) 2006 Brandon Aaron ([email protected] || http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 */

(function($){
  var div;

  $.fn.outerHTML = function() {
    var elem = this[0],
      tmp;

    return !elem ? null
      : typeof ( tmp = elem.outerHTML ) === 'string' ? tmp
      : ( div = div || $('<div/>') ).html( this.eq(0).clone() ).html();
  };

})(jQuery);

Use it as follows:

$('#some-element').outerHTML();

You can use outerhtml but in JavaScript over the DOM and not jQuery, for example:

  var text = document.getElementById('hello').outerHTML;

jsbin code to demonstrate: http://jsbin.com/obutul/edit#javascript,html,live

There is also an outerHTML property on html elements, which includes the selected element itself.

outerHTML is implemented across nearly all browsers now (including old versions of ie - firefox is the only one dragging its feet, but it's scheduled for v11), so I've adapted @James Hill's answer to use this native functionality where present as it should be more efficient.

jQuery.fn.outerHTML = function(s) {
    return this[0].outerHTML ? this[0].outerHTML :
           s ? this.before(s).remove()
             : jQuery("<p>").append(this.eq(0).clone()).html();
};

var outer = $("#1").outerHTML();

Be aware though that there are a few cross-browser inconsistencies in outerHTML (e.g look at this page in chrome and compare with ie)

You can wrap the desired div in another div and then fetch the parent div's html.

<div><div id="1" style="qwe"><span class="1"></span></div></div>
<div><div id="2" style="asd"><span class="2"></span></div></div>
<div><div id="3" style="zxc"><span class="3"></span></div></div>

Now,

$("#1").parent().html() will fetch the desired string.