我发现jQuery并不总是从HTML字符串创建正确的DOM。下面是一个小示例代码:
var x = "<div><p><ul><li>1</li></ul></p></div>";
console.log('x = ' + x);
console.log('jQuery(x) = ' + jQuery(x).html());
var y = "<div><div><ul><li>1</li></ul></div></div>";
console.log('y = ' + y);
console.log('jQuery(y) = ' + jQuery(y).html());
这是我使用 jQuery 1.7.1 运行它的输出:
x = <div><p><ul><li>1</li></ul></p></div>
jQuery(x) = <p></p><ul><li>1</li></ul><p></p>
y = <div><div><ul><li>1</li></ul></div></div>
jQuery(y) = <div><ul><li>1</li></ul></div>
如您所见,第二个示例创建了正确的 DOM,第一个示例没有。唯一的区别是 <p>
标签而不是 <div>
.这是jQuery的错误还是功能?
这可能是浏览器的细微差别,因为<ul>
元素在<p>
元素中都是非法的。
可能发生的情况是,当jQuery尝试在字符串中创建它所理解的HTML元素时,浏览器正在"自动更正"jQuery生成的HTML。