jQuery get html of container including the container itself

Question

How do i get the html on '#container' including '#container' and not just what's inside it.

<div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

I have this which gets the html inside #container. it does not include the #container element itself. That's what i'm looking to do

var x = $('#container').html();
$('#save').val(x);

Check http://jsfiddle.net/rzfPP/58/

you could put container inside another container and get that containers html... but that seems a little hacky. perhaps if we knew a little more about the problem, we could come up with a workable solution? what are you doing with a text area full of html? — Patricia, Jun 23 '11 at 19:18
possible duplicate of [Get selected element's outer HTML](http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html) — Ian Mackinnon, Apr 10 '15 at 10:15

score 176 · Accepted Answer · edited Apr 17 '13 at 08:10

176

If you wrap the container in a dummy P tag you will get the container HTML also.

All you need to do is

var x = $('#container').wrap('<p/>').parent().html();

Check working example at http://jsfiddle.net/rzfPP/68/

To unwrap()the <p> tag when done, you can add

$('#container').unwrap();

edited Apr 17 '13 at 08:10

Toby Allen

10,997
11
73
124

answered Jun 23 '11 at 20:07

Hussein

42,480
25
113
143

21

@mc10 we can simply use clone() and you will not have to worry about extra elements created. `var x = $('#container').clone().wrap('
').parent().html();`. The idea of wrap is great and allot less complicated then most of the solutions provided. – Pinkie Jun 24 '11 at 00:18
Firefox issue is out-of-date so I suggest to vote up @MikeM answer because it's in pure JS. – Rob Dec 16 '13 at 12:00
6

Why a `
` tag? Wouldn't a `
` make more sense?
– Martin Burch Jun 12 '14 at 23:26
7

This has a much simpler solution. See my answer. – tozlu Sep 02 '15 at 10:34

score 150 · Answer 2 · edited May 23 '17 at 11:54

150

var x = $('#container').get(0).outerHTML;

UPDATE : This is now supported by Firefox as of FireFox 11 (March 2012)

As others have pointed out, this will not work in FireFox. If you need it to work in FireFox, then you might want to take a look at the answer to this question : In jQuery, are there any function that similar to html() or text() but return the whole content of matched component?

edited May 23 '17 at 11:54

Community

1
1

answered Jun 23 '11 at 19:15

ShaneBlake

11,056
2
26
43

8

This works in Firefox, and it's better than the accepted solution as of now. – luqita Mar 12 '14 at 18:06
1

this is an elegant way to do that, better then the accepted answer which was just a dirty hack – MinhajulAnwar Oct 29 '15 at 07:07
This is perfect. – Gaurav Aggarwal Jan 24 '19 at 05:08
this is the perfect answer because wrapping the parent tag with div or p is bad idea. may be your css will break. specially when you are using bootstrap (e.g form-row). hence this answer is quite good. – Sudhir K Gupta Jul 03 '19 at 06:06

score 107 · Answer 3 · answered Aug 02 '15 at 17:47

107

I like to use this;

$('#container').prop('outerHTML');

answered Aug 02 '15 at 17:47

tozlu

4,667
3
30
44

8

This seems like the best solution to me, requires no dom manipulation, or pseudo dom manipulation (the wrap methods). And the jquery object already has the property. – Nieminen Jul 26 '17 at 19:47
2

love this solution – Sameera Kumarasingha Dec 31 '18 at 08:59
This is the most elegant solution. – Tami Oct 27 '21 at 23:23
This is definitely the best solution to the problem – Rich Jun 10 '22 at 11:40
this solution its brilliant thnaks for sharing this – elaz Mar 22 '23 at 10:31

score 72 · Answer 4 · answered Jun 23 '11 at 19:16

72

var x = $('#container')[0].outerHTML;

answered Jun 23 '11 at 19:16

MikeM

27,227
4
64
80

1

Firefox issue is out-of-date so I suggest to vote up this answer. – Rob Dec 16 '13 at 11:59
1

Using .clone() works, but this is much cleaner, imo. The accepted answer creates new elements in the DOM = bad. – pete Mar 15 '14 at 20:30

Robert Noack · Answer 5 · 2016-05-26T14:23:28.970

16

$('#container').clone().wrapAll("<div/>").parent().html();

Update: outerHTML works on firefox now so use the other answer unless you need to support very old versions of firefox

edited May 26 '16 at 14:23

answered Jun 23 '11 at 19:17

Robert Noack

1,286
14
22

outerHTML property does not work on Firefox so you need to do it with clone – Robert Noack Jun 23 '11 at 19:20

score 2 · Answer 6 · edited Jan 08 '17 at 12:45

2

Oldie but goldie...

Since user is asking for jQuery, I'm going to keep it simple:

var html = $('#container').clone();
console.log(html);

Fiddle here.

edited Jan 08 '17 at 12:45

Konrad Viltersten

36,151
76
250
438

answered Feb 03 '16 at 13:24

prinsen

955
8
7

2

This does not help in retrieving the html of the container itself. It does not even return html code. I can see that it may be practical to access the target node via clone to avoid modifying the dom, but then it would be good to mention why you use this method. – AeonOfTime Jul 24 '18 at 07:11

score 1 · Answer 7 · edited Aug 26 '19 at 12:35

$.fn.outerHtml = function(){
    if (this.length) {
        var div = $('<div style="display:none"></div>');
        var clone =
        $(this[0].cloneNode(false)).html(this.html()).appendTo(div);
        var outer = div.html();
        div.remove();
        return outer;
    }
    else {
        return null;
    }
};

from http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010

score 0 · Answer 8 · edited Dec 15 '11 at 02:49

0

var x = $($('div').html($('#container').clone())).html();

edited Dec 15 '11 at 02:49

animuson

53,861
28
137
147

answered Jun 23 '11 at 19:15

kei

20,157
2
35
62

6

You are creating 3 jquery objects in one statement. Although it works, it's an overkill. – Pinkie Jun 23 '11 at 19:27

score 0 · Answer 9 · edited May 23 '17 at 11:47

Firefox doesn't support outerHTML, so you need to define a function to help support it:

function outerHTML(node) {
    return node.outerHTML || (
        function(n) {
            var div = document.createElement('div');
            div.appendChild( n.cloneNode(true) );
            var h = div.innerHTML;
            div = null;
            return h;
        }
    )(node);
}

Then, you can use outerHTML:

var x = outerHTML($('#container').get(0));
$('#save').val(x);

score -2 · Answer 10 · answered Aug 30 '13 at 13:22

-2

Simple solution with an example :

<div id="id_div">
  <p>content<p>
</div>

Move this DIV to other DIV with id = "other_div_id"

$('#other_div_id').prepend( $('#id_div') );

Finish

answered Aug 30 '13 at 13:22

hassane86

1

The OP is requesting the raw HTML represented by a jQuery object, where this method moves a jQuery object from one place to another. – Simon Robb Nov 21 '13 at 01:56

jQuery get html of container including the container itself

10 Answers10

Linked

Related