ループを使用してDOM操作を簡略化するバニラJS

Question

私はこれらの要素をDOMに追加しようとしている次のJSコードを持っています。私はそうしましたが、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>