jQuery，获取整个元素的html


jQuery, get html of a whole element

本问题已经有最佳答案，请猛点这里访问。

我希望得到所选元素的整个HTML，而不仅仅是其内容。.html()根据文档使用javascripts innerhtml()方法。HTML：

1
2
3
4
5
6
7
8
    <p>
Some Content
</p>
 
 
    <p>
Some Content
</p>

使用$('#divs:first').html();只返回paragraph元素。我想获取整个元素的HTML，如下所示：

1
2
3
    <p>
Some Content
</p>

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

您可以克隆它以获取整个内容，如下所示：

1
var html = $("").append($("#div1").clone()).html();

或者让它成为一个插件，大多数人倾向于称之为"outerhtml"，比如：

1
2
3
jQuery.fn.outerHTML = function() {
  return jQuery('').append(this.eq(0).clone()).html();
};

然后你可以打电话给：

1
var html = $("#div1").outerHTML();
相关讨论

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

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

大约是速度的两倍

1
$("").append($("#el").clone()).html();

所以我会选择：

1
2
3
4
5
6
7
/*
 * 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 : '';  
};
相关讨论

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

$('divs').get(0).outerhtml；

就这么简单。

相关讨论

通过jquery的clone()方法，您可以很容易地获得子对象本身及其所有的死者(子对象)，只是

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

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

如有疑问，您将在第一个查询中获得此信息。

1
2
3
     <p>
Some Content
</p>

这样编写HTML：

1
    <img src="image.jpg">

然后.html()函数获取img标记！您可以在任何地方附加。：)