jQuery ottiene l'html del contenitore incluso il contenitore stesso

Come posso ottenere l'html su '#container' incluso '#container' e non solo cosa c'è 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>

Ho questo che ottiene l'html all'interno di #container. non include l'elemento #container stesso. Questo è quello che sto cercando di fare

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

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

Se avvolgi il contenitore in un Ptag fittizio otterrai anche il contenitore HTML.

Tutto quello che devi fare è

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

Controlla l'esempio funzionante su http://jsfiddle.net/rzfPP/68/

Per unwrap()l' <p>etichetta una volta fatto, è possibile aggiungere

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

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

AGGIORNAMENTO : ora è supportato da Firefox a partire da FireFox 11 (marzo 2012)

Come altri hanno sottolineato, questo non funzionerà in FireFox. Se ne hai bisogno per funzionare in FireFox, allora potresti dare un'occhiata alla risposta a questa domanda: in jQuery, ci sono funzioni simili a html () o text () ma che restituiscono l'intero contenuto del componente corrispondente?

Mi piace usare questo;

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

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

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

Aggiornamento: outerHTML ora funziona su Firefox, quindi usa l'altra risposta a meno che non sia necessario supportare versioni molto vecchie di Firefox

Oldie but goldie ...

Poiché l'utente richiede jQuery, lo renderò semplice:

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

Violino qui.

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

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

Firefox non supporta outerHTML , quindi è necessario definire una funzione per supportarla:

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

Quindi, puoi usare outerHTML:

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

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

Soluzione semplice con un esempio:

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

Sposta questo DIV su un altro DIV con id = "other_div_id"

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

finire