问题描述
为什么会这样?
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>
我的假设是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
内使用。