怎样在 JavaScript 中动态创建 HTML 元素并为其设置自定义属性

本文详解如何使用 JavaScript 动态创建 HTML 元素（如 <h3>），并为每个元素添加自定义属性（如 templeNames），再批量插入到指定容器中，适用于列表渲染、模板构建等实际场景。

本文详解如何使用 javascript 动态创建 html 元素（如 `

`），并为每个元素添加自定义属性（如 `templenames`），再批量插入到指定容器中，适用于列表渲染、模板构建等实际场景。

在前端开发中，动态生成 DOM 元素并赋予其语义化或功能性属性是常见需求。题目要求“创建 HTML 元素 并 设置属性”，关键在于理解：不能仅用字符串拼接（虽可行但存在 XSS 风险且缺乏 DOM 控制力），而应优先采用原生 DOM 方法（如 document.createElement() + element.setAttribute()）实现安全、可维护的代码。

以下为推荐的规范写法：

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);});

✅ 优势说明：

• 使用 createElement 和 appendChild 确保 DOM 操作安全，避免 HTML 字符串注入风险；
• setAttribute() 可灵活设置任意属性（包括自定义属性），dataset 则专用于 data-* 属性（自动驼峰转换，如 data-temple-names → dataset.templeNames）；
• 逐个创建并追加元素，便于后续绑定事件、添加样式类或执行其他 DOM 操作。

⚠️ 注意事项：

立即学习“Java免费学习笔记（深入）”；

• 若必须使用字符串拼接（如性能敏感的大批量静态渲染），请确保数据已严格校验/转义，避免 XSS；
• 自定义属性名建议遵循 HTML5 规范，优先使用 data-* 前缀（如 data-temple-name），便于浏览器兼容与语义化；
• 注意目标容器元素（如 #yourElementId）必须在 DOM 加载完成后执行脚本，推荐将代码置于 <script> 标签底部，或包裹在 DOMContentLoaded 事件中。

掌握这一模式，不仅能完成课堂任务，更是构建动态 UI 的基础能力——从创建、设属性、到插入，每一步都体现对 DOM API 的精准运用。