使用 JavaScript 动态生成按钮并按类别组织-html教程-PHP中文网

使用 JavaScript 动态生成按钮并按类别组织

霞舞

发布： 2025-09-06 17:14:53

原创

802人浏览过

使用 javascript 动态生成按钮并按类别组织

本文档旨在指导开发者如何使用 JavaScript 动态地根据数据生成 HTML 按钮，并按照预定义的类别对这些按钮进行组织。我们将通过一个实际案例，演示如何利用数组数据，结合 DOM 操作，高效地创建按钮元素，并将其放置到对应的类别容器中，最终实现一个可交互的游戏列表页面。

动态生成按钮

首先，我们需要一个包含按钮数据的数组。数组中的每个元素都应包含按钮的类别、名称和 URL。例如：

var buttonArr = [
    { "category":"Action","name":"Temple Run 2","url":"https://bigfoot9999.github.io/html5-games/games/templerun2/"},
    { "category":"Action","name":"Slope Game","url":"https://bigfoot9999.github.io/Slope-Game/"},
    { "category":"Puzzle", "name": "2048", "url": "https://example.com/2048" }
];

登录后复制

接下来，使用 forEach 循环遍历数组，并为每个元素创建一个按钮。使用模板字符串可以方便地将变量插入到 HTML 字符串中。

buttonArr.forEach(function (arrayItem) {
    console.log(arrayItem.name);
    console.log(arrayItem.url);
    document.getElementById('buttonDiv').innerHTML += `<button onClick='openGame("${arrayItem.url}")'>${arrayItem.name}</button>`;
},);

登录后复制

关键点：

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

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

确保 HTML 中存在一个 id 为 buttonDiv 的元素，用于存放生成的按钮。
使用模板字符串（反引号 `）来创建包含变量的 HTML 字符串。
使用 ${variable} 的语法将变量的值插入到字符串中。
openGame 函数用于处理按钮点击事件，打开指定 URL 的游戏。

按类别组织按钮

为了按类别组织按钮，我们需要为每个类别创建一个容器。可以在 HTML 中预先定义这些容器，或者使用 JavaScript 动态创建。这里展示预先定义的方式：

<h1>Category 1</h1>
<div id="category1"></div>

<h1>Category 2</h1>
<div id="category2"></div>

登录后复制

然后，在循环遍历数组时，根据按钮的类别，将按钮添加到相应的容器中。

buttonArr.forEach(function (arrayItem) {
    const categoryId = arrayItem.category.toLowerCase().replace(/\s+/g, ''); // 将类别转换为 ID 格式
    const categoryDivId = `category${categoryId}`;
    let categoryDiv = document.getElementById(categoryDivId);

    // 如果类别容器不存在，则创建它
    if (!categoryDiv) {
        categoryDiv = document.createElement('div');
        categoryDiv.id = categoryDivId;
        document.body.appendChild(categoryDiv); // 或者添加到其他合适的父元素
        const categoryHeader = document.createElement('h1');
        categoryHeader.textContent = arrayItem.category;
        document.body.insertBefore(categoryHeader, categoryDiv); // 在div之前插入标题
    }

    categoryDiv.innerHTML += `<button onClick='openGame("${arrayItem.url}")'>${arrayItem.name}</button>`;
});

登录后复制

代码解释：

生成类别 ID： 将类别名称转换为小写，并移除空格，以生成一个有效的 HTML ID。
获取类别容器： 尝试获取与类别 ID 匹配的 HTML 元素。
创建类别容器（如果不存在）： 如果不存在，则创建一个新的 div 元素，并将其添加到文档中。
添加按钮到容器： 将按钮添加到对应的类别容器中。

完整代码示例

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Buttons</title>
</head>
<body>

  <div id="buttonDiv"></div>

  <script type="text/javascript">
    //start game code
    var buttonArr = [
        { "category":"Action","name":"Temple Run 2","url":"https://bigfoot9999.github.io/html5-games/games/templerun2/"},
        { "category":"Action","name":"Slope Game","url":"https://bigfoot9999.github.io/Slope-Game/"},
        { "category":"Puzzle", "name": "2048", "url": "https://example.com/2048" }
    ];

    buttonArr.forEach(function (arrayItem) {
        const categoryId = arrayItem.category.toLowerCase().replace(/\s+/g, ''); // 将类别转换为 ID 格式
        const categoryDivId = `category${categoryId}`;
        let categoryDiv = document.getElementById(categoryDivId);

        // 如果类别容器不存在，则创建它
        if (!categoryDiv) {
            categoryDiv = document.createElement('div');
            categoryDiv.id = categoryDivId;
            document.body.appendChild(categoryDiv); // 或者添加到其他合适的父元素
            const categoryHeader = document.createElement('h1');
            categoryHeader.textContent = arrayItem.category;
            document.body.insertBefore(categoryHeader, categoryDiv); // 在div之前插入标题
        }

        categoryDiv.innerHTML += `<button onClick='openGame("${arrayItem.url}")'>${arrayItem.name}</button>`;
    });

    //end game code
    let win;

    function openGame(url) {
      if (win) {
        win.focus();
        return;
      }

      win = window.open();
      win.document.body.style.margin = '0';
      win.document.body.style.height = '100vh';
      const iframe = win.document.createElement('iframe');
      iframe.style.border = 'none';
      iframe.style.width = '100%';
      iframe.style.height = '100%';
      iframe.style.margin = '0';
      iframe.src = url;
      win.document.body.appendChild(iframe);
    }
  </script>

</body>
</html>

登录后复制