Jquery .html() function returns html out of nested order
- by forcripesake
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?
