innerHTML not working as expected

Question

I have searched everywhere for a solution to this problem which I cannot explain.

here is the problem, whenever I use javascript's innerHTML to inject the following string:

example:

var s = "<div><p><div><p></p></div></p></div>"

document.getElementById("id").innerHTML = s;

In Firefox, using firebug, I look at the latest markup and see <div><p></p><div><p></p></div></div>

Anyone know what this occurs?

Answer 1

You cannot nest p or div inside another p. Closing the p is how the browser attempts to make your invalid HTML valid.