jQuery konteyner kendisi de dahil olmak üzere konteyner html olsun

'#Container' da dahil olmak üzere '#container' üzerindeki html'yi nasıl edinebilirim?

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

#Container içinde html alır bu var. #container öğesinin kendisini içermez. Yapmak istediğim şey bu

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

Http://jsfiddle.net/rzfPP/58/ adresini kontrol edin

Kapsayıcı bir sahte Petikete sarılırsa , kapsayıcı HTML'sini de alırsınız.

Tek yapman gereken

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

Http://jsfiddle.net/rzfPP/68/ adresinde çalışan örneği kontrol edin

To etiketi yapılır, ekleyebilirsinizunwrap()<p>

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

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

GÜNCELLEME : Bu, FireFox 11 (Mart 2012) itibariyle Firefox tarafından desteklenmektedir

Diğerlerinin de belirttiği gibi, bu FireFox'ta çalışmaz. FireFox'ta çalışması gerekiyorsa, bu sorunun cevabına bir göz atmak isteyebilirsiniz: jQuery'de, html () veya text () işlevine benzeyen ancak eşleşen bileşenin tüm içeriğini döndüren herhangi bir işlev var mı?

Bunu kullanmayı seviyorum;

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

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

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

Güncelleme: outerHTML artık firefox'ta çalışıyor, bu nedenle firefox'un çok eski sürümlerini desteklemeniz gerekmedikçe diğer yanıtı kullanın

Eski ama iyi...

Kullanıcı jQuery istediğinden, basit tutacağım:

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

Burada keman çal.

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

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

Firefox outerHTML desteklemediği Gerekirse bu nedenle, bir işlev tanımlamak yardım desteği kendisine:

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

Daha sonra outerHTML'yi kullanabilirsiniz:

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

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

Bir örnekle basit çözüm:

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

Bu DIV'yi id = "other_div_id" ile diğer DIV'ye taşıyın

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

Bitiş