jquery - 是否可以从 .html() 返回的 html 创建元素？

Question

正如所料，以下 jQuery 将从 html 创建节点：

var nodes = $( "<li>ABC</li><li>DEF</li>" );

现在，考虑以下 html ：

        <ul class="foo">
            <li>ABC</li>
            <li>DEF</li>
        </ul>

我的问题，为什么以下返回错误消息而不是节点？

var html = $( "ul.foo" ).html();
var nodes = $( html );

错误信息是：

Uncaught Error: Syntax error, unrecognized expression: <li>ABC</li>
            <li>DEF</li> 

你可以在这里看到它的运行http://jsfiddle.net/HDk47/

Answer 1

jQuery 的解析启发式不喜欢html.

删除空格可以解决问题：

var html = $.trim( $( "ul.foo" ).html() );

更新了小提琴。

更新：Felix Kling在我能够之前挖掘了文档参考方式。

Answer 2

参考http://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring，“从 1.9 开始，如果字符串以小于 ( "<") 字符。"

var html = $( "ul.foo" ).html();
html = html.replace(/^[ \r\n\t]+/g,'');//remove leading whitespace
var nodes = $(html);

Answer 3

错误在这里：

var html = $( "ul.foo" ).html();
var nodes = $( html );

而是这样做：

var html = $( "ul.foo" ).html();
var nodes = $( html );

我测试了它并且它有效