当孩子包含标签时，下划线模板双父p标签

如何解决当孩子包含标签时，下划线模板双父p标签

为什么会这样？

我有以下代码使用下划线模板和jQuery

HTML

<div id="app"></div>

JS

const foo = '<div>test</div>';
$('#app').html(_.template('<p><%= foo %></p>'));

我希望

<div id="app">
  <p>
    <div>test</div>
  </p>
</div>

我得到了

<div id="app">
  <p></p>
  <div>test</div>
  <p></p>
</div>

为什么模板输出2个同级<p>标签而不是一个父<p>标签？

我的假设是Underscore可以保护我免受编写无法访问的代码的侵扰，但是我不知道这是否真的在发生什么事情。

Codepen：https://codepen.io/brianbest/pen/ExyQwpP

解决方法

您遇到了一个常见问题的实例，即div标记内不允许使用p标记。

通常在HTML中，确实允许在其他块元素内使用块元素（例如div）。但是p是一种特殊情况，它只能包含内联元素（如span）。

因此，当浏览器遇到div时，它将为您关闭p，然后呈现div，然后创建一个新的p以匹配您原来的关闭p。因此，创建您在CodePen中看到的结构。

如果您更改代码以使用：

const foo = '<b>test</b>';

然后它将按您期望的那样工作，因为b是内联元素，并且可以在p内使用。

有关更多信息：Why can't the <p> tag contain a <div> tag inside it?