How to convert an element to a string using jQuery

Question

I don't need innerHTML; I need innerHTML with tags. Let's call an 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 the element by id:

 $("#1") 

And how can I get a line like this:

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

Of course, html () does not work, because it will only return a range.

Answer 1

you can do something like this:

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

Answer 2

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 Information

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

Answer 3

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

 /*! Copyright (c) 2006 Brandon Aaron ( [e-mail] || 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(); 

Answer 4

You can use outerhtml , but in JavaScript over the DOM rather than jQuery , for example:

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

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

Answer 5

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

Answer 6

outerHTML is implemented in almost all browsers (including older versions ie - firefox is the only one that drags legs, but is planned for v11 ), so I adapted @James Hill's answer to use this native functionality where it is present, since it should be more effective.

 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(); 

Remember that in outerHTML there are several inconsistencies between browsers (for example, look at this page in chrome and compare with i.e.)

Answer 7

You can wrap the desired div in another div and then extract the parent html div.

 <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 select the desired line.