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>