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

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


当前回答

我使用了Jessica更新的Volomike解决方案。只是添加了一个检查以查看元素是否存在,并使其返回空白以防不存在。

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

当然,可以这样使用:

$('table#buttons').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的基本支持统计信息

火狐(壁虎):11。。。。发布日期:2012-03-13铬:0.2…………发布2008-09-02Internet Explorer 4.0…1997年发布歌剧7。。。。。。。。。。。。。。。。。。。。。。发布日期:2003-01-28Safari 1.3…………..2006-01-12发布

关于:prop('outerHTML')呢?

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

要设置:

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

这对我有用。

PS:这是jQuery1.6中添加的。

我在寻找问题的答案时遇到了这个问题,我试图删除一个表行,然后将其添加回表的底部(因为我正在动态创建数据行,但希望在底部显示“添加新记录”类型的行)。

我也有同样的问题,因为它正在返回innerHtml,因此缺少TR标记,该标记保存了该行的ID,这意味着不可能重复该过程。

我发现的答案是jquery remove()函数实际上返回了它删除的元素作为对象。所以,要删除并重新添加一行,就这么简单。。。

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

如果您没有删除该对象,但希望将其复制到其他地方,请改用clone()函数。

这对于更改dom上的元素非常有用,但在将html字符串传递到jquery时不适用,如下所示:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

经过一些操作后,我创建了一个函数,该函数允许以上内容在ie中用于html字符串:

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

这里有一个非常优化的jquery outerHTML插件:(http://jsperf.com/outerhtml-vs-jquery-clone-hack/5=>其他两个快速代码片段与FF等浏览器不兼容(11)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@安迪E=>我不同意你的看法。outerHMTL不需要getter和setter:jQuery已经给了我们'replaceWith'。。。

@mindsplay=>为什么要加入所有outerHTML?jquery.html只返回FIRST元素的html内容。

(抱歉,没有足够的声誉来撰写评论)