在 JavaScript 中创建多个按钮答案

【问题标题】：Create multiple buttons in JavaScript在 JavaScript 中创建多个按钮
【发布时间】：2018-10-06 03:34:05
【问题描述】：

我检查了语法错误，看起来一切正常，只是在加载页面正文时没有做任何事情。我知道我已将脚本正确链接到 html 文件，因为我已经实现了一个 JS 时钟，它在页面中显示自己，正如您在笔中看到的那样。我的代码有什么问题吗？为什么我的 10 个按钮不显示？我担心 Bootstrap 可能会阻止我显示按钮。

我的目的是创建 10 个按钮，这样我就不必编写相同的代码 10 次了。

Codepen 只是用来检查我的代码，我通常使用 Atom。 This is my Codepen!

<div class="container-fluid" id="buttons">

</div>

function createButtons() { 
  for(i = 0; i < 11; i++) {
    var button = document.createElement("<button type=\"button\" class=\"btn btn-outline-success\">Chapter[i]</button>");
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
  }
}
document.body.addEventListener("load", createButtons(), false);

【问题讨论】：

这不是你使用createElement, view documentation on how to use it correctly的方式。您应该已经在控制台上看到了错误
请（重新）阅读documentation on createElement()
var buttonDiv = document.getElementById("buttons"); for(var i = 1; i <= 10; i++) { buttonDiv.innerHTML += '<button type="button" class="btn btn-outline-success">Chapter['+i+']</button>'; }

标签： javascript html loops dom button

【解决方案1】：

函数createElement 接受标签名称作为参数。

var Chapter = [0,1,2,3,4,5,6,7,8,9,10];
for(i = 0; i < 11; i++) {
    var button = document.createElement("button");
    button.innerHTML = Chapter[i];
    button.className = "btn btn-outline-success";
    var buttonDiv = document.getElementById("buttons");
    buttonDiv.appendChild(button);
  }

【讨论】：