Node.js中替代innerHTML拼接HTML的方法（Express+Mustache环境）

方案一：利用Mustache模板引擎的循环语法（推荐） #

既然用了Mustache，完全不需要在后端手动拼接HTML，直接把userDetails.notes数据传递给视图，让模板引擎处理循环渲染：

1. 在Express路由中传递数据：

// 路由代码
res.render('your-view-name', {
  userDetails: userDetails // 直接把包含notes的对象传给视图
});

2. 在Mustache视图文件（比如.mustache）中用循环语法渲染：

<div id="items">
  {{#userDetails.notes}}
    <div class="item">
      <span>{{.}}</span>
    </div>
  {{/userDetails.notes}}
</div>

这里{{#userDetails.notes}}是Mustache的区块语法，用来遍历数组，{{.}}表示当前遍历到的数组元素。

方案二：后端手动拼接HTML字符串 #

如果一定要在后端拼接HTML，直接操作字符串即可，因为itemWrap只是普通字符串，不是DOM元素：

// 初始化包裹容器的开头部分
let itemWrap = '<div id="items">';

// 遍历notes拼接每个item的HTML，注意转义特殊字符防XSS
userDetails.notes.forEach(item => {
  const escapedItem = item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  itemWrap += `<div class="item"><span>${escapedItem}</span></div>`;
});

// 闭合包裹容器
itemWrap += '</div>';

// 把拼接好的HTML传给视图
res.render('your-view-name', {
  itemHtml: itemWrap
});

然后在Mustache视图中直接输出这个HTML（用{{{itemHtml}}}三重大括号，避免Mustache转义HTML）：

{{{itemHtml}}}

注意：手动拼接HTML时必须转义用户输入内容，防止XSS攻击；方案一的Mustache会自动转义{{.}}的内容，安全性更高。

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