EJS条件渲染未按预期运行，notes非空时同时渲染两个p标签

问题根因 #

• 核心是HTML规范限制：<p> 标签是段落类元素，仅允许嵌套图片、文本、链接等行内元素，不允许嵌套<div>这类块级元素。当浏览器解析到<p>内部的<div>标签时，会自动提前闭合当前的<p>标签，这就导致你看到的外层p没有包裹住内部div、结构异常的问题。
• 额外不规范点：两个分支都使用了相同的id="bookShelf"，HTML规范要求同一页面id必须唯一，也可能引发渲染异常。

修复方案 #

把外层的<p>标签替换为允许嵌套块级元素的<div>标签即可，修正后的EJS代码如下：

<% if (Object.keys(notes).length !== 0) { %>
<div class="card-text w-100" id="bookShelf">
   <div class="inline-block">
   <% notes.forEach(note => { %>
      <div class="card ml-2" style="width: 18rem;">
         <div class="card-body">
            <h5 class="card-title"><%= note.title %> </h5>
            <p class="card-text"><%= note.body %> </p>
         </div>
      </div>
   <% }); %>
   </div> 
</div>
<% } else { %>
<div class="card-text w-100" id="bookShelfEmpty" aria-placeholder="Add some notes...">
   你还没有添加任何笔记
</div>
<% } %>

内容的提问来源于stack exchange，提问作者DrusePstrago