获取所选元素的外部HTML

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

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

当前回答

如果场景是动态追加新行，则可以使用以下方法：

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrow是<tr>的类名。它复制最后一行并将其作为新的最后一行插入。这也适用于IE7，而[0].outerHTML方法不允许在IE7中赋值

其他回答

这对于更改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();
};

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

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

扩展jQuery：

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

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

关于：prop（'outerHTML'）呢？

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

要设置：

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

这对我有用。

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

又短又甜。

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

或借助箭头功能更甜蜜的事件

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

或者根本没有jQuery

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

或者如果你不喜欢这种方法，检查一下

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

推荐文章