使用循環來簡化DOM操作Vanilla JS

Question

我有以下的JS代碼，我試圖將這些元素附加到DOM。我已經這樣做了，但是我試圖找出如何使用循環來追加這些以遵循DRY原則。我只能使用香草JS。

var divOne = document.getElementById('buttonHolder'); 
 

 
var btnGroupOne = document.createElement('div') 
 
btnGroupOne.className = 'btn-group'; 
 
divOne.appendChild(btnGroupOne); 
 

 
var btnOne = document.createElement('button'); 
 
var textOne = document.createTextNode('1'); 
 
btnOne.appendChild(textOne); 
 
btnOne.className = 'btn btn-default'; 
 
btnGroupOne.appendChild(btnOne); 
 

 
var btnTwo = document.createElement('button'); 
 
var textTwo = document.createTextNode('2'); 
 
btnTwo.appendChild(textTwo); 
 
btnTwo.className = 'btn btn-default'; 
 
btnGroupOne.appendChild(btnTwo); 
 

 
var btnThree = document.createElement('button'); 
 
var textThree = document.createTextNode('3'); 
 
btnThree.appendChild(textThree); 
 
btnThree.className = 'btn btn-default'; 
 
btnGroupOne.appendChild(btnThree); 
 

 
var btnFour = document.createElement('button'); 
 
var textFour = document.createTextNode('4'); 
 
btnFour.appendChild(textFour); 
 
btnFour.className = 'btn btn-default'; 
 
btnGroupOne.appendChild(btnFour);

<div id="buttonHolder"></div>

Answer 1

，你可以嘗試抽象掉儘可能多的代碼，安迪是正確的功能是最適合這種任務：

function buttonMaker(textnode) { 
 
    var btnOne = document.createElement('button'); 
 
    var textOne = document.createTextNode(textnode); 
 
    btnOne.appendChild(textOne); 
 
    btnOne.className = 'btn btn-default'; 
 
    return btnOne; 
 
} 
 

 
var numberOfButtons = 4; 
 

 
var btnHolder = document.createElement('div'); 
 

 
// in a loop you can then do this: 
 
for (var i = 1; i <= numberOfButtons; i++) { 
 
    btnHolder.appendChild(buttonMaker(i)); 
 
} 
 

 
document.getElementById('btnBox').appendChild(btnHolder);

<div id="btnBox"></div>

莫非