js拼接html字符串的注意事项

JS拼接HTML字符串是Web开发中非常常见的方法，通常用于在页面中动态显示数据或者添加新的HTML元素。在拼接HTML字符串时，需要注意以下几点：

1. 字符串拼接方式

字符串拼接可以使用 + 连接符，也可以使用模板字符串。使用模板字符串可以在字符串内方便地插入变量或表达式，避免繁琐的字符串连接操作。示例如下：

// 使用+连接符
const htmlStr1 = "<div class='item'>" + 
                 "<h2>" + title + "</h2>" + 
                 "<p>" + content + "</p>" + 
                 "</div>";

// 使用模板字符串
const htmlStr2 = `<div class='item'>
                     <h2>${title}</h2>
                     <p>${content}</p>
                 </div>`;

2. HTML编码

拼接的字符串中可能包含HTML特殊字符，如 <、>、& 等，这些字符需要进行HTML编码，否则会导致页面渲染出错。可以使用浏览器自带的 HTMLElement.innerText 方法来自动进行HTML编码：

const title = "This is a <strong>title</strong>";

// 使用innerHTML会导致HTML标签生效，可能导致XSS漏洞
const htmlStr1 = "<div>" + title + "</div>"; 
// 错误示例，会导致HTML标签生效
// 结果为：<div>This is a <strong>title</strong></div>

// 使用innerText自动进行HTML编码，避免XSS漏洞
const div = document.createElement('div');
div.innerText = title;
const htmlStr2 = div.outerHTML;
// 正确示例，结果为：<div>This is a &lt;strong&gt;title&lt;/strong&gt;</div>

示例

以下示例展示了如何通过JS拼接HTML字符串并将其添加到DOM中。

<!--HTML结构-->
<div id="list"></div>
<button id="btn">添加列表项</button>

const list = document.querySelector('#list');
const btn = document.querySelector('#btn');
let count = 0;

btn.addEventListener('click', () => {
  count++;
  const item = createElement('div', {class: 'item'}, [
    createElement('span', {}, count),
    createElement('button', {class: 'delete-btn'}, '删除')
  ]);
  list.appendChild(item);
});

function createElement(tagName, attrs = {}, children = []) {
  const elem = document.createElement(tagName);
  for (const attr in attrs) {
    elem.setAttribute(attr, attrs[attr]);
  }
  children.forEach(child => {
    if (typeof child === 'string') {
      elem.appendChild(document.createTextNode(child));
    } else if (child instanceof HTMLElement) {
      elem.appendChild(child);
    }
  });
  return elem;
}

在以上示例中，首先定义了一个createElement()方法，用于动态创建HTML元素。然后在按钮的click事件中，通过createElement()方法创建一个div，并将其添加到列表中。每点击一次按钮，就会创建一个新的div，并添加到列表中。