如何在JS中拼接HTML？

在JavaScript中拼接HTML字符串是前端开发中的常见任务，无论是动态渲染数据还是构建用户界面，都需要高效且安全的方式,以下是几种主流方法及最佳实践：

基础字符串拼接

使用加号（）连接

const userName = "Alice";
const html = '<div class="card">' +
             '<h2>' + userName + '</h2>' +
             '<button>Click</button>' +
             '</div>';

缺点：代码可读性差，易出错，性能较低（频繁创建新字符串）。

数组join()方法

const items = ["Apple", "Banana", "Orange"];
let html = ['<ul>'];
items.forEach(item => {
  html.push('<li>', item, '</li>');
});
html.push('</ul>');
document.body.innerHTML = html.join('');

优点：性能优于拼接（减少中间字符串创建）,适合循环场景。

现代语法方案

模板字符串（ES6+）

const title = "Welcome";
const links = [{name: "Home", url: "#"}];
const html = `
  <header>
    <h1>${title}</h1>
    <nav>
      ${links.map(link => 
        `<a href="${link.url}">${link.name}</a>`
      ).join('')}
    </nav>
  </header>
`;

优势：

• 支持多行字符串和变量嵌入（${variable}）
• 可嵌套表达式（如map()循环）
• 代码可读性高

DOM操作方案

document.createElement()

const div = document.createElement('div');
div.className = "alert";
div.innerHTML = `<strong>Hello!</strong>`;
document.body.appendChild(div);

适用场景：需直接操作DOM节点时，避免innerHTML的安全风险。

DocumentFragment（文档片段）

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p');
  p.textContent = `Item ${i}`;
  fragment.appendChild(p);
}
document.getElementById('container').appendChild(fragment);

优点：批量添加节点时减少页面重绘,提升性能。

安全防护：防止XSS攻击

拼接用户输入数据时,必须转义特殊字符：

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }[tag])
  );
}
const userInput = '<script>alert("Hack!")</script>';
const safeHtml = `<div>${escapeHTML(userInput)}</div>`;

关键点：

• 转义&, <, >, , 等字符
• 使用第三方库如DOMPurify处理富文本

进阶方案：模板引擎

使用Handlebars.js

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
  <div class="post">
    <h3>{{title}}</h3>
    <p>{{content}}</p>
  </div>
</script>
<script>
  const template = Handlebars.compile(document.getElementById('template').innerHTML);
  const html = template({ title: "Hello", content: "World" });
</script>

优势：逻辑分离、可复用模板、自动转义（默认开启）。

性能与选择建议

• ：优先选模板字符串（易读、现代）
• 循环/性能敏感：用数组join() 或 DocumentFragment
• 用户输入：必须转义或使用模板引擎自动防护
• 大型项目：采用Handlebars、EJS等模板引擎

引用说明参考MDN Web文档（DOM操作指南）、OWASP XSS防护建议、ES6标准规范及Google性能优化实践，安全函数基于开源社区最佳实现,模板引擎用例遵循Handlebars官方文档。

通过合理选择拼接策略，可兼顾代码可维护性、性能与安全性,构建高质量的Web应用。