获取所选元素的外部HTML

我试图用jQuery获取所选对象的HTML。我知道.html（）函数；问题是我需要包含所选对象的HTML（在本例中为表行，其中.HTML（）仅返回行内的单元格）。

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

当前回答

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

其他回答

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

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

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

神奇的是：

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

克隆意味着您实际上没有干扰DOM。在没有它的情况下运行它，您将看到在所有超链接之前/之后插入p个标记（在本例中），这是不可取的。所以，是的，使用.clone（）。

它的工作方式是，它获取每个一个标记，在RAM中克隆它，用p个标记包装，获取它的父标记（即p标记），然后获取它的innerHTML属性。

编辑：听取了建议，将div标记更改为p标记，因为它的类型更少，工作方式也相同。

node.cloneNode（）几乎不像黑客。您可以克隆节点并将其附加到任何所需的父元素，也可以通过操作单个财产来操作它，而不必在其上运行正则表达式，或者将其添加到DOM中，然后在后面操作它。

也就是说，您还可以迭代元素的属性来构造元素的HTML字符串表示。如果jQuery添加一个outerHTML函数，那么很可能就是这样实现的。

你也可以这样做

document.getElementById(id).outerHTML

其中id是要查找的元素的id

使用普通JavaScript非常简单。。。

document.querySelector('#selector')

扩展jQuery：

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

并像这样使用：$（“#myTableRow”）.outerHTML（）；

推荐文章