将一个jQuery集合转换成HTML

Question

在给定一个jQuery结果集后，如何将其转换回普通的HTML呢？

<div class="abc">
    foo <strong>FOO</strong>
</div>
<div class="def">
    bar
</div>

--

var $mySet = $('div');

给定$mySet，你会如何返回上面的普通HTML呢？

- nickf

Answer 1

我建议创建一个临时容器，然后获取该新容器的html()：

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

// alerts:

<div class="abc">
    foo <strong>FOO</strong>
</div><div class="def">
    bar
</div>

- Owen

Answer 2

如果你的集合只包含一个项目，你可以使用古老的 Javascript：

var html = $mySet[0].outerHTML; // note HTML is all caps... that always burns me

- anewcomer

---

你可以轻松地扩展此代码以获取所有元素：$mySet.map(function () { return this.outerHTML; }).get().join(''); 在我写这个问题的时候，并不是所有的浏览器都支持 outerHTML，但现在它似乎有了相当好的支持。 - nickf

它只会返回找到的第一个元素的HTML字符串。 - vsync

不太喜欢这个答案——如果你的集合不只包含一个项目呢？ - Thomas

为什么这个答案很糟糕：https://jsfiddle.net/h3c9hcp7/ - 如果您更新例如输入的值，然后尝试使用 outerHTML，它不会打印出来，您将简单地丢失您的值。 - vladkras

Answer 3

也许你需要一个客户端模板引擎。 看看这篇文章使用jQuery的客户端模板引擎

我正在使用它，感觉非常棒。 你只需要在一个div中设置你想要使用的模板，然后将其与json对象/数组一起使用即可。

- vitorsilva

Answer 4

var $mySet = $('div');
var html = $mySet.html();

如果你也想要元素的HTML（未经测试）：

var $mySet = $('div');
var html = $mySet.clone().wrap('<div></div>').html();

顺便提一下，这里的 $ 是变量名的一部分。在 JavaScript 中，与 PHP 不同，变量名不需要加上 $，但也没坏处。

- strager

---

抱歉，那是不正确的。这只会返回第一个 div 的内部 HTML。我实际上想要它返回像上面第一个示例中的 HTML。 - nickf

请尝试我的第二个代码片段。 - strager

Answer 5

使用 jQuery 的appendTo方法，如果我理解你所说的“返回纯HTML”的意思正确的话。

- gizmo