JavaScript动态创建HTML元素及设置自定义属性

在前端开发的实际工作中，动态生成 DOM 元素并为其赋予语义化或功能性的自定义属性，是一个高频且基础的需求。比如有一个常见的场景：需要根据一个数组（如 ['Temple A', 'Temple B', 'Temple C']），批量创建

标题，每个标题还要带上一个对应的自定义属性（如 templeNames），然后统一插入到某个容器里。这听起来不复杂，但“用什么方式做”和“为什么这么做”，其实藏着不少讲究。

很多初学者第一反应是用字符串拼接 HTML，比如 container.innerHTML += '

...

'。这种方式虽然直观，但风险不小：一是容易引入 XSS 漏洞，二是后续对每个元素绑定事件或样式管理都变得很别扭。真正的推荐做法，是老老实实用原生 DOM API——document.createElement() 配合 element.setAttribute()，或者更语义化的 dataset 属性。

规范写法：安全、可控、易维护

下面这段代码就是一个标准示例，直接复制就能跑通：

const listTemple = ['Temple A', 'Temple B', 'Temple C'];
const container = document.querySelector('#yourElementId');

// 清空原有内容（可选，避免重复追加）
container.innerHTML = '';

listTemple.forEach(temple => {
  const h3 = document.createElement('h3');
  h3.textContent = temple;                    // 设置文本内容（安全，防 XSS）
  h3.setAttribute('templeNames', temple);     // 添加自定义属性
  // 也可使用 data-* 属性更符合标准：h3.dataset.templeNames = temple;
  container.appendChild(h3);
});

这段代码的核心逻辑很清晰：创建元素 → 设置内容 → 设置属性 → 追加到容器。每一步都直接调用 DOM 方法，没有字符串拼接，自然也就没有注入风险。而且因为每个元素都是独立的 HTMLElement 对象，后续想给某个

加点击事件、改样式、或者根据属性做条件判断，都只需直接操作 DOM 节点，非常灵活。

为什么推荐 setAttribute 而不是直接用 dataset？

两者都可以用，但适用场景稍有不同：

• setAttribute()：可以设置任意属性，包括非标准自定义属性（比如 templeNames）。如果你需要向后兼容或者属性名不符合 data-* 规范，可以用它。但更好的实践是优先考虑 HTML5 推荐的 data-*。
• dataset：专为 data-* 属性设计，比如 data-temple-names 对应 h3.dataset.templeNames（自动驼峰转换）。浏览器兼容性很好，语义化更强，推荐作为首选。

上面的例子中，如果想用 dataset，只需把 h3.setAttribute('templeNames', temple) 替换成 h3.dataset.templeNames = temple 即可，最终在 DOM 中会呈现为 data-temple-names="Temple A"。

注意事项与最佳实践

• 关于容器与脚本执行时机：目标容器元素（比如 #yourElementId）必须在脚本执行前就已经存在于 DOM 中。所以建议将