jQuery：外部 html() [重复]答案

【问题标题】：jQuery: outer html() [duplicate]jQuery：外部 html() [重复]
【发布时间】：2011-08-10 07:04:24
【问题描述】：

想象一下我们有这样的东西：

<div id="xxx"><p>Hello World</p></div>

如果我们这样调用.html函数：

$("#xxx").html();

我们会得到：

<p>Hello World</p>

但我需要得到：

<div id="xxx"><p>Hello World</p></div>

那么，我需要做什么？我想在#xxx 周围添加另一个包装器，但这不是一个好主意。

【问题讨论】：

标签： jquery

【解决方案1】：

只需使用标准 DOM 功能：

$('#xxx')[0].outerHTML

或者用.prop()简单一点：

$('#xxx').prop('outerHTML')

outerHTML 得到很好的支持 - 在 Mozilla 或 caniuse 验证。

【讨论】：

另一个选项：$('#xxx').prop('outerHTML')
请记住，截至 2015 年 4 月，SVG 元素在所有浏览器中仍然没有 outerHTML 属性，请参阅：stackoverflow.com/a/20559830/656010
请记住，这种方法不会在 html 中执行 javascript，而接受 HTML 字符串的 jQuery 方法可以执行代码。
更新：由于prop()添加到jQuery源代码中，现在可以更简洁：$('#xxx').prop('outerHTML');
请记住，这种方法只提供了 first 元素的outerHTML，例如$('ab')[0].outerHTML 将返回 a，而不是 ab。

【解决方案2】：

创建一个临时元素，然后clone()和append()：

$('<div>').append($('#xxx').clone()).html();

【讨论】：

@jamietre，是的，因为.append() 将始终移动元素。
我投了反对票，因为这是解决简单问题的一种非常迂回的方法。查看 VanillaJS 的文档：developer.mozilla.org/en-US/docs/Web/API/element.outerHTML
这是开启“jQuery 盲板”的一个很好的例子，因为普通的 JS 解决方案（见下面安迪的解决方案）要简单得多。
这似乎是一个过于复杂的重量级解决方案。我更喜欢只使用简单的 dom outerHTML 属性。
此解决方案更好，因为在某些特殊情况下可能会缺少 outerHTML 属性。

【解决方案3】：

无兄弟解决方案：

var x = $('#xxx').parent().html();
alert(x);

通用解决方案：

// no cloning necessary    
var x = $('#xxx').wrapAll('<div>').parent().html(); 
alert(x);

【讨论】：

【解决方案4】：

如果您不想添加包装器，则可以手动添加代码，因为您知道要定位的 ID：

var myID = "xxx";

var newCode = "<div id='"+myID+"'>"+$("#"+myID).html()+"</div>";

【讨论】：