How to transform element to string with jQuery

Question

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.

possible duplicate of stackoverflow.com/questions/2419749/… — bang
– 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
– Mathias Bynens, Commented Feb 8, 2012 at 21:07

meo · Accepted Answer · 2012-02-09 15:00:38Z

6

you could do something like this:

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

edited Feb 9, 2012 at 15:00

answered Feb 7, 2012 at 13:23

meo

31.3k20 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mathias Bynens Over a year ago

Actually, to select the element with id=1 you would need to use $('#\\31 '), not $('#1'). See mothereff.in/css-escapes#01. (I know it’s just an example, but hey, it doesn’t work.)

meo Over a year ago

@MathiasBynens thx for this, i was still used to ID's being not valid as numbers froum HTML4 ;)

wheresrhys · Accepted Answer · 2012-02-07 13:54:39Z

5

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 .

edited Feb 7, 2012 at 13:54

wheresrhys

23.7k21 gold badges97 silver badges165 bronze badges

answered Feb 7, 2012 at 12:50

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

6 Comments

Chris Kempen Over a year ago

string outer and not var outer? Learning something new every day..!

James Hill Over a year ago

@ChrisKempen, no, var outer is correct. Sometimes my brain thinks C# when writing JS.

Chris Kempen Over a year ago

Haha no probs! Liking your solution, +1!

Jashwant Over a year ago

It happens with everyone ;) I've just seen a foreach in javascript :)

James Hill Over a year ago

Umm....developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…)

|

Mathias Bynens · Accepted Answer · 2012-02-07 13:21:55Z

2

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

answered Feb 7, 2012 at 13:21

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

1 Comment

meo Over a year ago

this is a pretty clean solution that only takes more effort for lame browsers... +1

Ben · Accepted Answer · 2012-02-07 12:55:31Z

1

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

answered Feb 7, 2012 at 12:55

Ben

10.3k21 gold badges104 silver badges159 bronze badges

2 Comments

wheresrhys Over a year ago

This doesn't work in firefox (possibly some other browsers too)

wheresrhys Over a year ago

Although just checked, and it looks like a release with outerHTML implemented is fairly imminent bugzilla.mozilla.org/show_bug.cgi?id=92264

Sirko · Accepted Answer · 2012-02-07 12:50:11Z

0

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

answered Feb 7, 2012 at 12:50

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

1 Comment

jAndy Over a year ago

..but have a close look on the browser compatibility table.

wheresrhys · Accepted Answer · 2012-02-07 13:55:34Z

0

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)

edited Feb 7, 2012 at 13:55

answered Feb 7, 2012 at 13:19

wheresrhys

23.7k21 gold badges97 silver badges165 bronze badges

Comments

Jashwant · Accepted Answer · 2012-02-07 12:54:40Z

-1

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.

answered Feb 7, 2012 at 12:54

Jashwant

29.2k16 gold badges76 silver badges110 bronze badges

3 Comments

wheresrhys Over a year ago

Sorry - a bit slow to comment. This is slightly unworkable because it either a) involves changing the html in advance, so can't be used on any arbitrary element; or b) means you have to inject a div into the DOM using JS, which might mess with other code which expects a different DOM tree.

Jashwant Over a year ago

I mentioned you 'can'. If you cant , dont use it . Keep it simple :)

Jashwant Over a year ago

Also, who told you to change the markup, we have clone(). See the second answer, stackoverflow.com/questions/2419749/…

Collectives™ on Stack Overflow

How to transform element to string with jQuery

7 Answers 7

2 Comments

6 Comments

1 Comment

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

6 Comments

1 Comment

2 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related