jQuery nhận html của container bao gồm cả chính container

Làm cách nào để tôi nhận được html trên '#container' bao gồm cả '#container' và không chỉ những gì bên trong nó.

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

Tôi có cái này lấy html bên trong #container. nó không bao gồm chính phần tử #container. Đó là những gì tôi đang muốn làm

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

Kiểm tra http://jsfiddle.net/rzfPP/58/

Nếu bạn bọc container trong Pthẻ giả, bạn cũng sẽ nhận được HTML container.

Tất cả bạn cần làm là

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

Kiểm tra ví dụ làm việc tại http://jsfiddle.net/rzfPP/68/

Để unwrap()các <p>thẻ khi thực hiện xong, bạn có thể thêm

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

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

CẬP NHẬT : Điều này hiện được Firefox hỗ trợ kể từ FireFox 11 (tháng 3 năm 2012)

Như những người khác đã chỉ ra, điều này sẽ không hoạt động trong FireFox. Nếu bạn cần nó để hoạt động trong FireFox, thì bạn có thể muốn xem câu trả lời cho câu hỏi này: Trong jQuery, có bất kỳ hàm nào tương tự như html () hoặc text () nhưng trả về toàn bộ nội dung của thành phần khớp không?

Tôi thích sử dụng cái này;

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

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

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

Cập nhật: outsHTML hoạt động trên firefox ngay bây giờ, vì vậy hãy sử dụng câu trả lời khác trừ khi bạn cần hỗ trợ các phiên bản firefox rất cũ

Cũ nhưng dùng vẫn tốt...

Vì người dùng đang yêu cầu jQuery, tôi sẽ làm cho nó đơn giản:

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

Fiddle ở đây.

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

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

Firefox không hỗ trợ bên ngoàiHTML , vì vậy bạn cần xác định một chức năng để hỗ trợ nó:

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

Sau đó, bạn có thể sử dụng bên ngoàiHTML:

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

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

Giải pháp đơn giản với một ví dụ:

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

Di chuyển DIV này sang DIV khác với id = "other_div_id"

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

Hoàn thành