document.getElementById и петли

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

Я хочу сделать несколько кнопок, поэтому я использовал цикл для создания тех. Но это не работает.

Вот URL: 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

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

Answer 3

вы можете использовать cloneNode(), чтобы скопировать его и добавить несколько. Я также рекомендую удалить узел из DOM и показать только клоны на экране. И, глядя на ваш массив, кажется, вы хотите также добавить некоторые данные. Это делается либо путем присвоения имущества или с использованием .setAttribute («Name», значение)

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