javascript - Jquery .html() 函数返回不符合嵌套顺序的 html

Question

我有一个从数据库返回持久化 html 模板的方法。

模板的格式为:

<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>

但是在我运行以下命令后:

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

现在的 Html 是:

<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>

那么什么给出了呢？有没有比 .html() 方法更好的方法来替换空 template_area 的内容？

编辑:已解决。用 div 替换段落会产生正确的嵌套。 Jquery:自 2006 年以来编写的 html 比我更好。

Answer 1

<h2>标签不是 <p> 的有效子级