jQuery ruft HTML des Containers einschließlich des Containers selbst ab

Wie bekomme ich das HTML auf '#container' einschließlich '#container' und nicht nur was darin enthalten ist.

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

Ich habe dies, das das HTML in #container bekommt. Das Element #container selbst ist nicht enthalten. Das ist es, was ich tun möchte

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

Überprüfen Sie http://jsfiddle.net/rzfPP/58/

Wenn Sie den Container in ein Dummy- PTag einschließen, erhalten Sie auch den HTML-Code des Containers.

Alles was Sie tun müssen, ist

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

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/rzfPP/68/

Um unwrap()den <p>Tag , wenn Sie fertig, können Sie hinzufügen

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

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

UPDATE : Dies wird jetzt von Firefox ab FireFox 11 (März 2012) unterstützt.

Wie andere bereits betont haben, funktioniert dies in FireFox nicht. Wenn es in FireFox funktionieren soll, sollten Sie sich die Antwort auf diese Frage ansehen: Gibt es in jQuery eine Funktion, die HTML () oder Text () ähnelt, aber den gesamten Inhalt der übereinstimmenden Komponente zurückgibt?

Ich benutze das gerne;

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

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

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

Update: OuterHTML funktioniert jetzt unter Firefox. Verwenden Sie daher die andere Antwort, es sei denn, Sie müssen sehr alte Versionen von Firefox unterstützen

Alt aber gut...

Da der Benutzer nach jQuery fragt, werde ich es einfach halten:

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

Geige hier.

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

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

Firefox unterstützt OuterHTML nicht. Sie müssen daher eine Funktion definieren , um dies zu unterstützen:

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

Dann können Sie OuterHTML verwenden:

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

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

Einfache Lösung mit einem Beispiel:

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

Verschieben Sie diesen DIV mit id = "other_div_id" auf einen anderen DIV.

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

Fertig