CODEWITHSUNDEEP
javascriptjquerydom
Fisher
Fisher

Reputation: 1794

How to transform element to string with jQuery

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.

Upvotes: 6

Views: 11254

Answers (7)

meo
meo

Reputation: 31249

you could do something like this:

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

Upvotes: 6

wheresrhys
wheresrhys

Reputation: 23500

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)

Upvotes: 0

James Hill
James Hill

Reputation: 61812

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 .

Upvotes: 5

Mathias Bynens
Mathias Bynens

Reputation: 149574

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

Upvotes: 2

Ben
Ben

Reputation: 10288

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

Upvotes: 1

Jashwant
Jashwant

Reputation: 29005

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.

Upvotes: -1

Sirko
Sirko

Reputation: 74046

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

Upvotes: 0

Related Questions