JQuery，获取整个元素的 html

我希望获取所选元素的整个 html，而不仅仅是它的内容。.Html ()根据文档使用 javascript innerHTML ()方法。 HTML:

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

使用 $('#divs:first').html();只返回段落元素，我想要得到整个元素的 html，如下所示:

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

我不能使用. rent，因为它将返回两个子 div 的 html。

217836 次浏览
小开
最佳答案

你可以克隆它来得到所有的内容，像这样:

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

或者把它做成一个插件，大多数人把它叫做“ outerHTML”，像这样:

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

然后你就可以打电话:

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

在典型的用例中，差异可能没有意义，但是使用标准的 DOM 功能

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

大约是

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

所以我会说:

/*
* 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 : '';
};
小开

通过 Jquery 的 Clone ()方法，您可以很容易地获得 child 本身及其所有子类(子类)

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


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

您将在问题中的第一个查询中获得此信息

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

只需要一行代码就可以实现这一点:

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

就这么简单。


提交答案