获取所选元素的外部 HTML

我正在尝试使用 jQuery 获取所选对象的 HTML。我知道.html()函数; 问题是我需要包含所选对象的 HTML（在这种情况下是一个表行，其中.html()只返回行内的单元格）。

我已经四处搜索并发现了一些克隆对象的非常 “hackish” 类型的方法，将它添加到新创建的 div 等等，但这看起来真的很脏。有没有更好的方法，或新版本的 jQuery（1.4.2）是否提供任何类型的outerHtml功能？

答案

我相信目前（2012 年 5 月 1 日），所有主流浏览器都支持 outerHTML 功能。在我看来，这个片段就足够了。我个人会选择记住这个：

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

编辑： element.outerHTML 基本支持统计信息

Firefox（Gecko）：11 .... 2012-03-13 发布
Chrome：0.2 ............... 发布 2008-09-02
Internet Explorer 4.0 ... 1997 年发布
Opera 7 ...................... 2003 年 3月 28 日发布
Safari 1.3 ................... 发布 2006-01-12

无需为其生成函数。就这样做：

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

（顺便提一下，您的浏览器控制台将显示记录的内容。自 2009 年左右以来，大多数最新的浏览器都具有此功能。）

最终的神奇之处在于：

.clone().wrap('<p>').parent().html();

克隆意味着你实际上并没有打扰 DOM。没有它运行它你会看到在所有超链接之前 / 之后插入p标签（在这个例子中），这是不可取的。所以，是的，使用.clone() 。

它的工作方式是，它需要每a标签，在 RAM 使得它的克隆，带有包装p标签，获取它的父（指p标签），然后得到innerHTML它的财产。

编辑：提出建议并将div标签更改为p标签，因为它更少打字并且工作原理相同。

2014 年编辑：问题和回复是从 2010 年开始的。当时，没有更好的解决方案可供广泛使用。现在，许多其他回复都更好：例如 Eric Hu，或 Re Capcha。

这个网站似乎有一个解决方案： jQuery：outerHTML | Yelotofu

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};