document.getElementByID 和 for 循环

Question

<button id="mybtn">click me for index </button>

我的 JavaScript 代码：

var myarray = [2,4,6,5,5];

(i=0; i<= myarray.length; i++){

   var allBtn = document.getElementByID("mybtn");

   document.body.appendChild(allBtn);
}

我想制作多个按钮，所以我使用 for 循环来创建这些按钮。但它不起作用。

这里是网址：http://jsbin.com/donafuluha/1/edit?html,js,console,output

Answer 1

您可以使用 cloneNode 来附加现有元素

Working Demo

代码：

var myarray = [2,4,6,5,5];


for(var i=0; i< myarray.length; i++){

  var allBtn = document.getElementById("mybtn").cloneNode(true);

  document.body.appendChild(allBtn);

}

Answer 2

您可以使用 cloneNode() 来复制它并附加多个。我还建议您从 DOM 中删除节点并仅在屏幕上显示克隆。看着你的数组，你似乎也想附加一些数据。这可以通过分配属性或使用 .setAttribute("name",value)

来完成

var myarray = [2,4,6,5,5];
var proto = document.getElementById("mybtn");
proto.parentElement.removeChild(proto);

for(var i=0; i<myarray.length; i++){
    var allBtn = proto.cloneNode(true);
    allBtn.setAttribute("data-index", myarray[i]);
    document.body.appendChild(allBtn);
}

Answer 3

You should try following code snippet it will solve your problem 
    var myarray = [2,4,6,5,5];
    for(var i=0; i<= myarray.length; i++){
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode("New Button"+(i+1));
        btn.appendChild(t);
        document.body.appendChild(btn);
      }