JQuery .html() usage

Question

Say I have

<div id="controller">
 <div id="first">1</div>
 <div id="second">2</div>
</div>

$('#controller').html().which returns

<div id="first">1</div>
<div id="second">2</div>

How do I get .html() to return

<div id="controller">
 <div id="first">1</div>
 <div id="second">2</div>
</div>

Or is there an alternate function for that?

Have a look at this [post](http://stackoverflow.com/a/4741203/1577396) — Mr_Green, Dec 28 '12 at 06:44
possible duplicate of [full HTML of object returned by jQuery selector](http://stackoverflow.com/questions/3535284/full-html-of-object-returned-by-jquery-selector) — DocMax, Dec 28 '12 at 06:44

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

Wrap it (ie. a clone) inside another parent

$('<div></div>').append($('#controller').clone()).html();

Also, check out a similar question.

edited May 23 '17 at 12:04

Community

answered Dec 28 '12 at 06:20

Yanick Rochon

Adil · Answer 2 · 2012-12-28T06:25:36.807

2

You need to use outerHTML

$('#controller')[0].outerHTML

You can add your div's clone to dynamically created div and use html of it.

$('<div>').append($('#controller').clone()).html();

edited Dec 28 '12 at 06:25

answered Dec 28 '12 at 06:19

Adil

2 Answers2