Question

Я узнал, что jQuery не всегда создает правильный DOM из строки HTML. Вот небольшой пример кода:

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

Это возможно браузер nuance, since <ul> elements are illegal in <p> elements.

Что происходит, так это то, что, когда jQuery пытается создать элементы HTML в вашей строке, как он ее понимает, браузер «автоматически исправляет» HTML, сгенерированный с помощью jQuery.