如何通过名称数组生成HTML按钮并插入到DOM节点中

有两种常用的实现方式，你可以根据实际场景选择：

方案1：原生DOM节点创建（推荐，安全性更高） #

直接通过document.createElement创建按钮节点，逐个插入目标容器，不会有XSS安全风险：

<body>
<div id="demo"></div>
<script>
const widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"];
const demoContainer = document.getElementById('demo');

widgetButtons.forEach(buttonText => {
  // 创建按钮元素
  const btn = document.createElement('button');
  // 设置按钮显示文本
  btn.textContent = buttonText;
  // 可在这里给按钮加点击事件、样式类等，示例：
  // btn.className = 'widget-btn';
  // btn.addEventListener('click', () => { console.log(`触发${buttonText}功能`) });
  // 插入到目标容器
  demoContainer.appendChild(btn);
})
</script>
</body>
</html>

方案2：HTML字符串拼接（代码更简洁） #

如果确定数组内的内容都是安全的纯文本，也可以用拼接HTML的方式一次性插入，性能更高：

<body>
<div id="demo"></div>
<script>
const widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"];
const demoContainer = document.getElementById('demo');

demoContainer.innerHTML = widgetButtons.map(text => `<button>${text}</button>`).join('');
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Josh Van Moorsel