jQuery：获取包括选择器在内的HTML？

Question

假设我有这段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。

- Shpigford

---

重复的问题：https://dev59.com/4XE95IYBdhLWcg3wMa51 - bradley.ayers

这是我目前所知道的最佳方法：https://dev59.com/4XE95IYBdhLWcg3wMa51。 - Moiz Tankiwala

Answer 1

在这个特定的情况下：

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

详细信息请参见此页面。

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

- Jamie Wong

---

为什么不使用wrap？我认为它更清晰。 - fl00r

使用 wrap 实际上会影响显示给用户的 DOM 树。而这种方法则不会。 - Jamie Wong

我被$("<div />")选择器搞糊涂了。我习惯于看到$('div')，但不带括号之类的东西。你或其他人能否向我解释一下它的作用？另外，最好不要将其添加到DOM中，但是，我很困惑为什么它不会。我认为如果我理解了第一部分，就会明白为什么了。有人能解释一下吗？ - Steve C.

@SteveC. 这里的"<div/>"不是选择器。$("<div />") 构造了一个新的 div 元素。请参考：http://api.jquery.com/jQuery/#jQuery2 - Jamie Wong

Answer 2

您可以尝试这个方法：

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

- phixr

---

remove() 是必要的吗？否则会产生某种内存泄漏吗？ - Jamie Wong

如果它从未添加到DOM中，那么猜测它并不必要。我更新了我的答案。 - phixr

Answer 3

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

- Dominic Barnes

Answer 4

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

- Andrey Popov

---

.detach() 方法与 .remove() 相同，但是 .detach() 会保留与已移除元素相关联的所有 jQuery 数据。 - Divyesh Kanzariya

Answer 5

仅使用 $('#example') 有什么问题吗？这会获取整个内容！

- ben

---

这会获取该元素的 jQuery 对象，而不是 HTML 字符串。 - Rito