jQuery：获取包含选择器的 HTML？答案

【问题标题】：jQuery: Get HTML including the selector?jQuery：获取包含选择器的 HTML？
【发布时间】：2011-08-01 01:33:32
【问题描述】：

假设我有这个 HTML：

<ul>
  <li id="example"><strong>Awesome</strong> example text</li>
</ul>

我希望能够做类似$('#example').html() 的事情，但现在这样做显然只会得到<strong>Awesome</strong> example text。

那么我怎样才能得到 HTML 包括被选择的元素呢？

即。 <li id="example"><strong>Awesome</strong> example text</li>

我正在使用 jQuery 1.4.4。

【问题讨论】：

【解决方案1】：

在这种特定情况下：

var outerHTML = $("<div />").append($('#example').clone()).html();

更多详情请见this page。

这里的讨论：http://api.jquery.com/html/（这说明这不在 jQuery 核心中以及为什么某些逻辑解决方案不起作用）

【讨论】：

为什么不使用wrap？我认为它更清洁
因为使用 wrap 实际上会影响向用户显示的 DOM 树。这没有。
我被 $("
") 选择器抛出。我习惯于看到 $('div')，但不带括号之类的。您或某人可以向我解释这是在做什么吗？此外，最好不要将它添加到 DOM 中，但是，我再次对为什么不添加它感到困惑。我想如果我理解了第一部分，我就会明白为什么。谁能解释一下？
@SteveC。 "
" 不是这里的选择器。 $("<div />") 构造一个新的 div 元素。见：api.jquery.com/jQuery/#jQuery2

【解决方案2】：

对于支持它的浏览器，outerHTML 可以做到这一点。有像 this 和 this 这样的 jQuery 插件可以通过一些聪明的 jQuery 实现支持。

【讨论】：

【解决方案3】：

你可以试试这个：

var html = $('<div>').append($('#example').clone()).html();

【讨论】：

【解决方案4】：

var outerHtml = $('#example').detach();

【讨论】：

【解决方案5】：

简单地使用 $('#example') 有什么问题吗？这抓住了整个事情！

【讨论】：