如何获取包含父级的HTML内容？

Question

我试图了解如何获取HTML内容，包括父选择器。我知道以下内容将为我提供HTML内容：

$obj.html();

（其中$ obj是对我的DOM对象的引用）

但是，如果我想要包含父选择器的HTML内容呢？例如，我们说我有这段代码：

<div id="sample" class="something">
  <div class="inner"></div>
</div>

如果我这样做：

$('#sample').html();

......我会得到：

<div class="inner"></div>

但我真正想要重新调整的是：

<div id="sample" class="something">
  <div class="inner"></div>
</div>

有什么想法吗？

Answer 1

虽然它不标准 - 但这非常有用everywhere。

使用Element.outerHTML

var el = $obj[0]; // get the HTML element from the jQuery object
el.outerHTML; // the HTML including the outside bits

（fiddle）

Answer 2

虽然它尚未完全标准化，但Element.outerHTML适用于大多数浏览器。

jsFiddle

document.querySelector('#sample').outerHTML;

Polyfills are available需要更早的浏览器支持：

参考

• W3C spec outerHTML
• WHATWG spec outerHTML