jQuery get html of container including the container itself
JavascriptJqueryJavascript Problem Overview
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);
Javascript Solutions
Solution 1 - Javascript
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();
Solution 2 - Javascript
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 : https://stackoverflow.com/questions/995760/in-jquery-are-there-any-function-that-similar-to-html-or-text-but-return-the/995796#995796
Solution 3 - Javascript
I like to use this;
$('#container').prop('outerHTML');
Solution 4 - Javascript
var x = $('#container')[0].outerHTML;
Solution 5 - Javascript
$('#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
Solution 6 - Javascript
Oldie but goldie...
Since user is asking for jQuery, I'm going to keep it simple:
var html = $('#container').clone();
console.log(html);
Solution 7 - Javascript
$.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
Solution 8 - Javascript
var x = $($('div').html($('#container').clone())).html();
Solution 9 - Javascript
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);
Solution 10 - Javascript
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