jQuery mendapatkan html wadah termasuk wadah itu sendiri

Bagaimana cara mendapatkan html di '#container' termasuk '#container' dan bukan hanya apa yang ada di dalamnya.

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

Saya punya ini yang mendapatkan html di dalam #container. itu tidak termasuk elemen #container itu sendiri. Itulah yang ingin saya lakukan

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

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

Jika Anda membungkus wadah dalam Ptag dummy Anda akan mendapatkan HTML wadah juga.

Yang perlu Anda lakukan adalah

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

Lihat contoh kerja di http://jsfiddle.net/rzfPP/68/

Untuk unwrap()itu <p>tag bila dilakukan, Anda dapat menambahkan

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

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

UPDATE : Ini sekarang didukung oleh Firefox pada FireFox 11 (Maret 2012)

Seperti yang telah ditunjukkan orang lain, ini tidak akan berfungsi di FireFox. Jika Anda membutuhkannya untuk bekerja di FireFox, maka Anda mungkin ingin melihat jawaban atas pertanyaan ini: Di jQuery, apakah ada fungsi yang mirip dengan html () atau teks () tetapi mengembalikan seluruh konten komponen yang cocok?

Saya suka menggunakan ini;

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

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

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

Pembaruan: outerHTML berfungsi di firefox sekarang jadi gunakan jawaban lain kecuali Anda perlu mendukung versi firefox yang sangat lama

Oldie tapi goldie ...

Karena pengguna meminta jQuery, saya akan membuatnya tetap sederhana:

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

Biola di sini.

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

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

Firefox tidak mendukung outerHTML , jadi Anda perlu mendefinisikan fungsi untuk membantu mendukungnya:

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

Kemudian, Anda dapat menggunakan outerHTML:

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

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

Solusi sederhana dengan contoh:

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

Pindahkan DIV ini ke DIV lain dengan id = "other_div_id"

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

Selesai