Verwenden einer Schleife, um die DOM-Manipulation zu vereinfachen Vanilla JS

Question

Ich habe den folgenden JS-Code, in dem ich versuche, diese Elemente an das DOM anzuhängen. Ich habe es getan, aber ich versuche herauszufinden, wie man eine Schleife verwendet, um diese anzuhängen, um den DRY-Prinzipien zu folgen. Ich kann nur Vanille JS verwenden.

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

Versuchen zu abstrahieren, so viel Code wie möglich, Andy ist rechts eine Funktion für diese Art von Aufgabe am besten ist:

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>