jQuery builds incorrect DOM from HTML string

Question

I found out jQuery does not always create the correct DOM from an HTML string. Here is a little example code:

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());

Here is the output I get running this with 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>

As you can see, the second example creates the correct DOM, the first example does not. The only difference is a <p> tag instead of a <div>. Is this a bug or feature of jQuery?

You are specifying invalid html. It is the input that is incorrect not the output. The html you see in the result is auto-corrected html. — Nope
– Nope, Commented Jun 19, 2012 at 12:20
@downvoter: Seriously? It's a good question. Upvoting to counteract. — Xyan Ewing
– Xyan Ewing, Commented Jun 19, 2012 at 12:28

Community · Accepted Answer · 2017-05-23 11:55:48Z

8

That's probably a browser nuance, since <ul> elements are illegal in <p> elements.

What's probably happening is that, when jQuery attempts to create the HTML elements in your string as it understood it, the browser is "auto-correcting" the HTML generated as jQuery goes along.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Jun 19, 2012 at 12:10

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xyan Ewing Over a year ago

Yepper, this is most likely it.

Alex K. Over a year ago

Thats it, try it directly; document.body.innerHTML = x; alert (document.body.innerHTML)

Collectives™ on Stack Overflow

jQuery builds incorrect DOM from HTML string

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related