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

Posted 2023-03-05

【中文标题】jQuery：获取包含选择器的 HTML？

【英文标题】：jQuery: Get HTML including the selector?

【发布时间】：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。

【问题讨论】：

重复***.com/questions/2419749/…

***.com/questions/2419749/… 是我所知道的最好的方法。

【参考方案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();

【讨论】：

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

猜猜如果它永远不会被添加到 dom 中是没有必要的。更新了我的答案。

【参考方案4】：

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

【讨论】：

.detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 保留与已删除元素关联的所有 jQuery 数据

【参考方案5】：

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

【讨论】：

this 抓取该元素的 jquery 对象，而不是 html 字符串