jQuery，获取整个元素的 html [重复]

Posted 2023-05-07

【中文标题】jQuery，获取整个元素的 html [重复]

【英文标题】：jQuery, get html of a whole element [duplicate]

【发布时间】：2011-04-06 13:34:49

【问题描述】：

我希望获取所选元素的整个 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。

【参考方案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();

【讨论】：

这是一个很好的答案，但是 jQuery 没有实现自己的方法真的很糟糕。

它并不完美。如果 HTML 有 script 标记，则该标记中的代码将在调用 append 时运行。这可能会导致问题。

【参考方案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 : '';  
;

【讨论】：

如果你只想要开始标签：/<[^>]+>/.exec(elem[0].outerHTML)[0]

我也喜欢默认为空字符串，而不是允许空引用错误，漂亮、简短、甜美和稳定，谢谢。这对我很有用。

支持标准 DOM 功能，速度提高了一倍 :)

【参考方案3】：

您只需一行代码即可实现这一目标：

$('#divs').get(0).outerHTML;

就这么简单。

【讨论】：

因为我是puppeteer的情况，jquery插件不是很方便，但是这一行风格正好适合puppeteer/phantomjs之类的报废脚本。

【参考方案4】：

您可以使用 Jquery 的 Clone() 方法轻松获取 child 本身及其所有死者（孩子），只需

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

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

您将在第一次查询时得到这个问题

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