jQuery, nhận html của toàn bộ phần tử

Question

Tôi muốn nhận toàn bộ html của phần tử đã chọn không chỉ nội dung của nó. .html() sử dụng phương thức javascripts innerHTML() theo tài liệu. HTML:

<div id="divs"> 
    <div id="div1"> 
    <p>Some Content</p> 
    </div> 
    <div id="div2"> 
    <p>Some Content</p> 
    </div> 
</div> 

Sử dụng $('#divs:first').html(); sẽ chỉ trả lại phần tử đoạn. Tôi muốn nhận được html cho toàn bộ phần tử, như vậy:

<div id="div1"> 
    <p>Some Content</p> 
    </div> 

Tôi không thể sử dụng. Trong suốt vì điều này sẽ trả về html của cả hai div con.

Answer 1

Bạn có thể sao chép nó để có được toàn bộ nội dung, như thế này:

var html = $("<div />").append($("#div1").clone()).html(); 

Hoặc làm cho nó một plugin, hầu hết có xu hướng gọi đây là "outerHTML", như thế này:

jQuery.fn.outerHTML = function() { 
    return jQuery('<div />').append(this.eq(0).clone()).html(); 
}; 

Sau đó, bạn chỉ có thể gọi:

var html = $("#div1").outerHTML(); 

Answer 2

Sự khác biệt có thể không có ý nghĩa trong trường hợp sử dụng thông thường, nhưng sử dụng chức năng DOM chuẩn ity

$("#el")[0].outerHTML 

là khoảng hai lần nhanh như

$("<div />").append($("#el").clone()).html(); 

vì vậy tôi sẽ đi với:

/* 
* Return outerHTML for the first element in a jQuery object, 
* or an empty string if the jQuery object is empty; 
*/ 
jQuery.fn.outerHTML = function() { 
    return (this[0]) ? this[0].outerHTML : ''; 
}; 

Answer 3

Bạn có thể dễ dàng có được bản thân và tất cả các decedents của nó (trẻ em) con với jQuery Phương thức Clone(), chỉ cần

var child = $('#div div:nth-child(1)').clone(); 

var child2 = $('#div div:nth-child(2)').clone(); 

Bạn sẽ nhận được thông tin này cho truy vấn đầu tiên như được hỏi trong câu hỏi

<div id="div1"> 
    <p>Some Content</p> 
</div> 

Answer 4

Bạn có thể đạt được điều đó chỉ với một mã dòng.

$ ('# divs'). Get (0) .outerHTML;

Đơn giản như vậy.

Answer 5

viết html của bạn như thế này:

<div id="element"> 
    <img src="image.jpg"> 
</div> 

thì .html() chức năng nhận được thẻ img! và bạn có thể nối thêm ở bất cứ nơi nào. :)