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

Question

我不知道如何使用数组将这些变成按钮：

var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]

如有任何帮助，我们将不胜感激。这是我尝试使用的代码

   <body>
   <div id="demo"></div>
   <script>
        var widgetButtons = ["Zoom In", "Zoom Out", "Pan", 
        "Search"];
   </script>
   </body>
   </html>

Answer 1

在你的HTML中：<div id="new">

在您的 JS/脚本中：

var widgetButtons = ["Zoom In", "Zoom Out", "Pan",
      "Search"];
    var element = document.getElementById("new");

    for (const widgetButtonsKey of widgetButtons) {
      var x = document.createElement("BUTTON");
      x.innerText = widgetButtonsKey
      console.log(x);
      element.appendChild(x);
    }

Answer 2

这是另一种方法，使用 forEach()。

ID 不能包含 space，因此我们在设置 ID 之前从项目的 name/text 中删除 space。

const widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"]
const demo = document.getElementById('demo');

widgetButtons.forEach( (item, idx) => {
  const btn = document.createElement('button');
  btn.id = item.replace(' ', '');
  btn.innerText = item;
  demo.appendChild(btn);
});

<html>
  <body>
    <div id="demo"></div>
  </body>
</html>

Answer 3

这是另一种方法。

var widgetButtons = ["Zoom In", "Zoom Out", "Pan", "Search"];
document.getElementById('demo').innerHTML = widgetButtons.map(text=>{
  return `<button>${text}</button>`;
}).join(' ');

<div id=demo></div>

Answer 4

    const demo = document.getElementById("demo");

    var widgetButtons = ["Zoom In", "Zoom Out", "Pan", 
    "Search"];

    //Loop through the array
    for (let index = 0; index < widgetButtons.length; index++) 
    {
        //Create button element using create element
        const button = document.createElement("button");
        //This adds button value (title of the button)
        button.innerHTML = widgetButtons[index];
        //Add style to increase margin
        button.style.margin = "10px";
        //Append the buttons created to the body
        demo.appendChild(button);
     }

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

Making HTML buttons from an array of names, and inserting them into the DOM

html

javascript

button