jQuery รับ html ของคอนเทนเนอร์รวมถึงคอนเทนเนอร์ด้วย

ฉันจะรับ html บน '#container' รวมถึง '#container' ได้อย่างไรและไม่ใช่แค่สิ่งที่อยู่ภายใน

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

ฉันมีสิ่งนี้ซึ่งได้รับ html ใน #container ไม่รวมองค์ประกอบ #container นั่นคือสิ่งที่ฉันต้องการจะทำ

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

ตรวจสอบhttp://jsfiddle.net/rzfPP/58/

หากคุณตัดคอนเทนเนอร์ในPแท็กดัมมี่คุณจะได้รับคอนเทนเนอร์ HTML ด้วย

สิ่งที่คุณต้องทำคือ

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

ตรวจสอบตัวอย่างการทำงานได้ที่http://jsfiddle.net/rzfPP/68/

ไปunwrap()ที่<p>แท็กเมื่อเสร็จแล้วคุณสามารถเพิ่ม

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

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

อัปเดต : ตอนนี้ได้รับการสนับสนุนโดย Firefox ในฐานะของ FireFox 11 (มีนาคม 2012)

ตามที่คนอื่น ๆ ได้ชี้ให้เห็นสิ่งนี้จะไม่ทำงานใน FireFox หากคุณต้องการให้มันทำงานใน FireFox คุณอาจต้องการคำตอบสำหรับคำถามนี้: ใน jQuery มีฟังก์ชั่นใดที่คล้ายกับ html () หรือ text () แต่คืนเนื้อหาทั้งหมดขององค์ประกอบที่ตรงกันหรือไม่?

ฉันชอบที่จะใช้สิ่งนี้

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

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

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

อัปเดต: outerHTML ใช้งานได้กับ firefox ทันทีดังนั้นให้ใช้คำตอบอื่น ๆ ยกเว้นว่าคุณต้องการสนับสนุน firefox เวอร์ชันเก่ามาก

Oldie แต่ goldie ...

เนื่องจากผู้ใช้กำลังขอ jQuery ฉันจะทำให้มันง่าย:

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

เล่นซอที่นี่

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

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

Firefox ไม่รองรับ outerHTMLดังนั้นคุณต้องกำหนดฟังก์ชั่นเพื่อช่วยสนับสนุน:

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

จากนั้นคุณสามารถใช้ outerHTML:

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

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

วิธีแก้ปัญหาง่ายๆด้วยตัวอย่าง:

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

ย้าย DIV นี้ไปยัง DIV อื่นด้วย id = "other_div_id"

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

เสร็จสิ้น