使用循环来简化 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

尽量抽象出尽可能多的代码，Andy 是对的，一个函数最适合这类任务：

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>