从名称数组制作HTML按钮，并将它们插入到DOM中

要从名称数组制作HTML按钮并将它们插入到DOM中，你可以按照以下步骤进行：

基础概念

HTML按钮：使用<button>标签创建按钮。
DOM操作：通过JavaScript操作DOM（文档对象模型），动态添加元素到页面中。

类型

静态按钮：预先定义在HTML中的按钮。
动态按钮：通过JavaScript动态生成的按钮。

应用场景

表单提交：动态生成表单提交按钮。
导航菜单：根据用户权限动态生成导航菜单按钮。
动态内容展示：根据数据动态生成内容展示按钮。

示例代码

以下是一个简单的示例，展示如何从名称数组制作HTML按钮并将它们插入到DOM中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Buttons</title>
</head>
<body>
    <div id="button-container"></div>

    <script>
        // 名称数组
        const names = ["Button 1", "Button 2", "Button 3"];

        // 获取容器元素
        const container = document.getElementById('button-container');

        // 遍历名称数组，生成按钮并插入到容器中
        names.forEach(name => {
            const button = document.createElement('button');
            button.textContent = name;
            button.onclick = () => {
                alert(`Clicked ${name}`);
            };
            container.appendChild(button);
        });
    </script>
</body>
</html>