Question

我希望获得所选元素的整个html，而不仅仅是它的内容。 .html（）根据文档使用javascripts 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

差异在典型用例中可能没有意义，但使用标准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 : '';  
};

Answer 3

只需一行代码即可实现。

$（＆＃39;＃的div＆＃39）。得到（0）.outerHTML;

就这么简单。

Answer 4

您可以使用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 5

像这样写你的HTML：

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

然后.html（）函数获取img标签！你可以在任何地方追加。:)）

jQuery，获取整个元素的html

5 个答案: