jQuery,获取整个元素的html

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

只需一行代码即可实现.

$( '#的div')得到(0).outerHTML.

就如此容易.