获取选定元素的外部 HTML

Question

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

我四处搜索，发现了一些非常“hackish”类型的克隆对象的方法，将其添加到新创建的 div 等等，但这似乎真的很脏。有没有更好的方法，或者新版本的 jQuery (1.4.2) 提供了任何outerHtml 功能？

Answer 1

相信目前（5/1/2012），所有主流浏览器都支持outerHTML功能。在我看来，这个 sn-p 就足够了。我个人会选择记住这一点：

// 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('');

编辑：Basic support stats 代表element.outerHTML

• 火狐（壁虎）：11 ....Released 2012-03-13
• 铬：0.2 ....Released 2008-09-02
• Internet Explorer 4.0...Released 1997
• 歌剧 7 ....................Released 2003-01-28
• Safari 1.3 ....................Released 2006-01-12

Answer 2

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

$('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 标记，因为它的输入更少且工作方式相同。

Answer 3

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();
};

Answer 4

怎么样：prop('outerHTML')？

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

设置：

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

它对我有用。

PS：这是在jQuery 1.6中添加的。

Answer 5

扩展 jQuery：

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

并像这样使用它：$("#myTableRow").outerHTML();