javascript - jQuery 从 HTML 字符串构建错误的 DOM

Question

我发现 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 的错误还是功能？

Answer 1

这可能是浏览器的细微差别，since <ul> elements are illegal in <p> elements .

可能发生的情况是，当 jQuery 尝试在字符串中创建它所理解的 HTML 元素时，浏览器会“自动更正”随着 jQuery 的运行而生成的 HTML。