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

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


当前回答

我同意Arpan的观点(2010年12月13日5:59)。

他的做法实际上是更好的做法,因为你不用克隆。如果您有子元素,克隆方法非常耗时,而且其他人似乎都不关心IE是否具有outerHTML属性(是的,IE实际上有一些有用的技巧)。

但我可能会创作一个有点不同的剧本:

$.fn.outerHTML = function() {
    var $t = $(this);
    if ($t[0].outerHTML !== undefined) {
        return $t[0].outerHTML;
    } else {
        var content = $t.wrap('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};

其他回答

你可以在这里找到一个很好的.outerHTML()选项https://github.com/darlesson/jquery-outerhtml.

与仅返回元素的html内容的.html()不同,此版本的.outerHTML()返回所选元素及其html内容,或将其替换为.replaceWith()方法,但不同之处在于,替换的html可以通过链接继承。

示例也可以在上面的URL中看到。

扩展jQuery:

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

并像这样使用:$(“#myTableRow”).outerHTML();

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

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

简单的解决方案。

var myself = $('#div').children().parent();

纯JavaScript:

var outerHTML = function(node) {
  var div = document.createElement("div");
  div.appendChild(node.cloneNode(true));
  return div.innerHTML;
};