javascript - 在 JavaScript 中创建多个按钮

Question

我已经检查了语法错误，看起来一切都很好，只是在加载页面正文时没有执行任何操作。我知道我已经将脚本正确链接到了 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);

Answer 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);
  }