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> 

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

Answer 1

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

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

Answer 2

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

 $("#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 : ''; }; 

Answer 3

您可以使用Jquery的Clone（）方法轻松地获取孩子本身以及所有的孩子（孩子）

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

你会得到这个问题的第一个查询

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

Answer 4

只需一行代码即可实现。

$（ '＃的div'）得到（0）.outerHTML。

就如此容易。

Answer 5

写下你的html像这样：

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

那么.html（）函数将获得img标签！ 你可以追加到任何地方:)