Jquery .html() function returns html out of nested order

Question

I have a method which returns a persisted html template from a database.

The template is of the format:

<div id="item_collection">
     <div id="item_x">
      <p id="item_x_headline"><h2>Some Headline</h2></p>
      <p id="item_x_excerpt>Some text here</p>
     </div>
    <div id="item_x+1">
      <p id="item_x+1_headline"><h1>Some Headline</h1></p>
      <p id="item_x+1_excerpt>Some text here</p>
     </div>
    ...and so on.
</div>

However after I run the following:

alert(data); //check that the template is in order. It Is.
$('#template_area').html(data);

the Html is now:

<div id="item_collection">
     <div id="item_x">
      <p id="item_x_headline"></p> <!--Note The Lack of Nesting -->
      <h2>Some Headline</h2>
      <p id="item_x_excerpt>Some text here</p>
     </div>
    <div id="item_x+1">
      <p id="item_x+1_headline"></p> <!--Note The Lack of Nesting -->
      <h1>Some Headline</h1>
      <p id="item_x+1_excerpt>Some text here</p>
     </div>
    ...and so on.
</div>

So what gives? Is there a better way to replace the empty template_area's content than the .html() method?

EDIT: Solved. replacing paragraphs with divs yields the correct nesting. Jquery: writing better html than I since 2006.

Answer 1

The <h2> tag is not a valid child of <p>

Answer 2

From http://www.w3.org/MarkUp/html-spec/html-spec_5.html

Block structuring elements include paragraphs, lists, and block quotes. They must not contain heading elements, but they may contain phrase markup, and in some cases, they may be nested.

Answer 3

Am i seeing a quote mismatch here?

in the

you are starting a double quote in the id=" and it is not ended properly. Some text here