jQuery,获取整个元素的html

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (782)

我希望获得所选元素的整个html,而不仅仅是它的内容...html()根据文档使用JavaScrippsinnerHTML()方法。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。

提问于
用户回答回答于

你可以克隆它以获取整个内容,如下所示:

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 : '';  
};

扫码关注云+社区

领取腾讯云代金券