Jquery HTML() function - how to include selector Html

Question

Possible Duplicate:
Get selected element's outer HTML

I suspect this is a really stupid question, but when you call the Html() function in JQuery it returns the selected nodes inner Html. Is there anyway of including the selected note in the returned Html? For example on the following HTML

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

this call $('div.demo-container').html(); returns

<div class="demo-box">Demonstration Box</div>

How do I get it to return

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

Thanks for the help!

Blazemonger · Accepted Answer · 2011-10-27T15:16:56.597

2

You could wrap a copy of it in a boring div and get the HTML of that:

var str = $('div.demo-container').clone().wrap('<div/>').parent().html();

edited Oct 27 '11 at 15:16

answered Oct 27 '11 at 15:08

Blazemonger

90,923
26
142
180

score 1 · Answer 2 · answered Oct 27 '11 at 15:05

1

Write this extension, example from here

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

Then when you want to use it:

$('#myTag').outerHTML();

answered Oct 27 '11 at 15:05

Gabe

49,577
28
142
181

Esailija · Answer 3 · 2011-10-27T15:14:22.090

0

$('div.demo-container').parent().html() //Only works in this specific situation

or

$('div.demo-container')[0].outerHTML; //Only works in IE and Chrome

edited Oct 27 '11 at 15:14

answered Oct 27 '11 at 15:05

Esailija

138,174
23
272
326

isn't outerHTML an IE only property? – Morgan T. Oct 27 '11 at 15:09
`.parent().html()` will give the wrong result if `div.demo-container` has siblings. – Blazemonger Oct 27 '11 at 15:11
@MorganTiley it works in chrome as well, doesn't seem to be supported by firefox – Esailija Oct 27 '11 at 15:11

score 0 · Answer 4 · answered Oct 27 '11 at 15:06

0

This may work for you:

$('div.demo-container').parent().html();

answered Oct 27 '11 at 15:06

jbabey

45,965
12
71
94

Gives the wrong results if `div.demo-container` has siblings. – Blazemonger Oct 27 '11 at 15:13
gives the right result to his example :) – jbabey Oct 27 '11 at 15:20

Jquery HTML() function - how to include selector Html

4 Answers4