jQuery pobiera html kontenera, w tym sam kontener

Jak uzyskać kod HTML na „#container”, w tym „#container”, a nie tylko to, co jest w środku.

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

Mam to, które pobiera kod HTML wewnątrz #container. nie zawiera samego elementu #container. To jest to, czego szukam

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

Sprawdź http://jsfiddle.net/rzfPP/58/

Jeśli opakujesz kontener w fikcyjny Ptag, otrzymasz również kod HTML kontenera.

Wszystko, co musisz zrobić, to

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

Sprawdź działający przykład pod adresem http://jsfiddle.net/rzfPP/68/

Po unwrap()zakończeniu do <p>tagu możesz dodać

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

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

AKTUALIZACJA : to jest teraz obsługiwane przez Firefoksa od wersji FireFox 11 (marzec 2012)

Jak zauważyli inni, to nie zadziała w FireFox. Jeśli potrzebujesz go do działania w FireFox, możesz rzucić okiem na odpowiedź na to pytanie: Czy w jQuery jest jakaś funkcja podobna do html () lub text (), ale zwraca całą zawartość dopasowanego komponentu?

Lubię tego używać;

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

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

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

Aktualizacja: externalHTML działa teraz w przeglądarce Firefox, więc użyj innej odpowiedzi, chyba że potrzebujesz obsługi bardzo starych wersji Firefoksa

Oldie but goldie ...

Ponieważ użytkownik pyta o jQuery, zamierzam to uprościć:

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

Tutaj skrzypce.

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

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

Firefox nie obsługuje zewnętrznego HTML , więc musisz zdefiniować funkcję, aby ją obsługiwać:

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

Następnie możesz użyć externalHTML:

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

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

Proste rozwiązanie z przykładem:

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

Przenieś ten DIV do innego DIV z id = "other_div_id"

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

koniec