jQuery obtiene html de contenedor, incluido el contenedor en sí

¿Cómo obtengo el html en '#container' que incluye '#container' y no solo lo que hay dentro?

<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>

Tengo esto que obtiene el html dentro de #container. no incluye el elemento #container en sí. Eso es lo que estoy buscando hacer

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

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

Si envuelve el contenedor en una Petiqueta ficticia , también obtendrá el HTML del contenedor.

Todo lo que necesitas hacer es

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

Consulte el ejemplo de trabajo en http://jsfiddle.net/rzfPP/68/

A unwrap()la <p>etiqueta cuando haya terminado, puede agregar

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

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

ACTUALIZACIÓN : Esto ahora es compatible con Firefox a partir de FireFox 11 (marzo de 2012)

Como otros han señalado, esto no funcionará en Firefox. Si necesita que funcione en FireFox, puede que desee echar un vistazo a la respuesta a esta pregunta: en jQuery, ¿hay alguna función similar a html () o text () pero devuelve todo el contenido del componente coincidente?

Me gusta usar esto;

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

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

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

Actualización: externalHTML funciona en Firefox ahora, así que usa la otra respuesta a menos que necesites soportar versiones muy antiguas de Firefox

Viejo pero valioso...

Como el usuario solicita jQuery, lo voy a mantener simple:

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

Violín aquí.

$.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;
    }
};

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

Firefox no es compatible con externalHTML , por lo que debe definir una función para ayudarlo:

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

Luego, puede usar outsideHTML:

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

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

Solución simple con un ejemplo:

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

Mueva este DIV a otro DIV con id = "other_div_id"

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

Terminar