当 children 包含标签时，下划线模板双 parent p 标签

Question

为什么会这样？

我有以下代码使用下划线模板和 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> 标签而不是一个 parent <p> 标签？

我的假设是 Underscore 保护我免受自己编写无法访问的代码的影响，但我不知道这是否真的是这里发生的事情。

Answer 1

您运行遇到了一个常见问题的实例，即 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?

Underscore Template double parent p tag when children contains tag