纯JS实现点击事件：每次点击添加HTML元素（规避innerHTML风险）

嗨，很高兴能帮你搞定这个问题！确实，innerHTML因为会直接解析字符串中的HTML代码，很容易引入XSS安全风险，尤其是当你的内容里包含用户输入的时候，绝对要避免使用。咱们用原生JS的DOM创建API来实现，既能达到需求，又能保证安全性。

下面是替换后的完整点击事件代码，完全不用innerHTML：

button.addEventListener('click', function () {
  // 1. 创建最外层的列表元素容器
  const listElem = document.createElement('div');
  // 添加基础类和动态类
  listElem.classList.add('list-elem', classList);
  // 设置data-id属性（用dataset更规范安全）
  listElem.dataset.id = id;

  // 2. 创建日期容器
  const dateDiv = document.createElement('div');
  dateDiv.classList.add('to-do-date');

  // 3. 创建日期标题
  const dateHeading = document.createElement('h3');
  // 用textContent设置文本，避免解析HTML
  dateHeading.textContent = `${myDateString} ${myTimeString}`;

  // 4. 创建关闭图标
  const closeIcon = document.createElement('i');
  closeIcon.classList.add('fas', 'fa-times');
  closeIcon.style.display = 'flex';

  // 5. 组装DOM结构
  dateDiv.appendChild(dateHeading);
  listElem.appendChild(dateDiv);
  listElem.appendChild(closeIcon);

  // 6. 把组装好的元素添加到页面目标容器中（这里假设你的容器类名为todo-list，按需修改）
  document.querySelector('.todo-list').appendChild(listElem);
});

为什么这个方案更安全？ #

• textContent 替代HTML字符串：它只会将内容当作纯文本渲染，不会解析任何HTML标签，彻底杜绝了恶意脚本注入的可能。
• DOM API 创建元素：所有元素都是通过createElement创建，属性通过classList.add、dataset等API设置，不会执行任何隐藏的代码。
• 结构清晰可控：每个元素的创建和配置都一目了然，后期维护也更方便。

如果你的classList、id等变量来自用户输入，这个方案也比innerHTML安全得多——即使恶意用户输入了特殊字符，也只会被当作纯文本或属性值的一部分，不会被解析执行。

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