javascript - 获取选定内容的 HTML，包括选定内容

Question

可能重复：
获取选定元素的外部 HTML

在 jQuery 中，我目前正在使用它来获取一些 HTML：

var content = $("tr#add-ingredients-over-here").html();

但是，我实际上需要将其包含tr在选定的 HTML 中。我不知道该怎么做。之后我还需要用其他一些 HTML 替换它。

关于如何做到这一点的任何建议？

Answer 1

您正在寻找的是元素的outerHTML。你可以试试这个：

var content = $("#add-ingredients-over-here")[0].outerHTML;

当前所有浏览器都支持此功能。Firefox 是最后一个在 Firefox 11（2012 年 3 月）中添加对此支持的；所有其他浏览器已经支持这一点至少 4 年了。如果你必须支持比这个 stackoverflow 线程更旧的浏览器，那么它有一个基于 jQuery 的实现，可以在任何地方工作：

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

Answer 2

另一种完全跨浏览器的方法。克隆 tbody，删除除所需行之外的所有内容并从中检索 html

var content = $("#add-ingredients-over-here")
                   .parent().clone().find('tr:not(#add-ingredients-over-here)').remove()
                    .end().html()

clone() 编辑：如果你需要全部，为什么不能只使用TR？克隆可以作为 jQuery 对象插入到另一个表中

/*copy whole row to another table*/
$('#otherTable').append( $("#add-ingredients-over-here").clone() );

Answer 3

尝试

$("tr#add-ingredients-over-here").parent().html();

它将首先检索父级，然后返回其 HTML 内容