当前位置：首页 > 前端开发 > 正文

如何在JS中拼接HTML？

admin
前端开发
2025-06-08
2586

在JavaScript中拼接HTML字符串，可通过以下方式实现：，1. **加号运算符拼接**： '' + content + ''，2. **模板字符串**（推荐）：` ${content} 支持多行和变量嵌入，3. **数组join()**：[”, content, ”].join(”)`，4. **createElement创建节点**：通过DOM API构建结构化元素，模板字符串因简洁性和可读性成为现代开发首选方案。

在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>
`;

优势：

如何在JS中拼接HTML？第1张

支持多行字符串和变量嵌入（${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>

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

性能与选择建议

方法	适用场景	注意点
模板字符串	简单动态内容、ES6+环境	嵌套逻辑需配合`map()`/`join()`
数组`join()`	循环生成内容	比拼接性能高20%~50%
`DocumentFragment`	批量添加100+个DOM节点	减少页面重排
模板引擎	复杂UI、多组件项目	学习成本，需引入库