jQuery obtém html de container incluindo o próprio container

Como obtenho o html no '#container' incluindo '#container' e não apenas no conteúdo.

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

Eu tenho isso que recebe o html dentro de #container. ele não inclui o próprio elemento #container. É isso que estou procurando fazer

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

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

Se você envolver o contêiner em uma Ptag fictícia, também receberá o HTML do contêiner.

Tudo que você precisa fazer é

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

Veja o exemplo de trabalho em http://jsfiddle.net/rzfPP/68/

Para unwrap()a <p>tag quando feito, você pode adicionar

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

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

ATUALIZAÇÃO : agora é suportado pelo Firefox a partir do FireFox 11 (março de 2012)

Como outros já apontaram, isso não funcionará no FireFox. Se você precisar que ele funcione no FireFox, poderá dar uma olhada na resposta a esta pergunta: No jQuery, existe alguma função semelhante a html () ou text (), mas retorna todo o conteúdo do componente correspondente?

Eu gosto de usar isso;

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

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

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

Atualização: outerHTML funciona no firefox agora, então use a outra resposta, a menos que você precise oferecer suporte a versões muito antigas do firefox

Oldie but goldie ...

Como o usuário está solicitando jQuery, vou mantê-lo simples:

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

Violino aqui.

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

O Firefox não oferece suporte a outerHTML , portanto, você precisa definir uma função para ajudá-lo:

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

Em seguida, você pode usar outerHTML:

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

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

Solução simples com um exemplo:

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

Mova este DIV para outro DIV com id = "other_div_id"

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

Terminar