Using a loop to simplify DOM manipulation Vanilla JS

Question

I have the following JS code in which I'm trying to append these elements to the DOM. I've done so, however I'm trying to figure out how to use a loop to append these to follow DRY principles. I can only use vanilla 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>

Could you show what you tried to code to avoid repeated code and explain what didn't work? — Conspicuous Compiler, Apr 07 '16 at 18:26
You don't really need a loop. Create a function called `createDefaultBtn` using the code you have that accepts a text node value and returns a new default button element which you can and add to your parent element. — Andy, Apr 07 '16 at 18:30

score 2 · Answer 1 · edited Apr 07 '16 at 18:49

2

Try to abstract away as much code as you can, Andy is right a function is best for this sort of task:

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>

edited Apr 07 '16 at 18:49

Conspicuous Compiler

6,403
1
40
52

answered Apr 07 '16 at 18:37

omarjmh

13,632
6
34
42

1

I'd recommend using a docfrag otherwise you're going to hit the DOM everytime you append a new button. – Andy Apr 07 '16 at 18:39
Pardon my edit. I don't like that OP is asking SO to do his homework, but if somebody else comes across this answer later, I'd like the code to work for them out of the box. – Conspicuous Compiler Apr 07 '16 at 19:22
1

@ConspicuousCompiler I appreciate the help, I wasn't trying to make it seem that I'm not doing any work on my own. This is only a small portion of a much larger portion of my code. I've completed it, but it was a suggestion that I try to implement loops to reduce repeated code. I've looked for solutions but I don't really understand how to use for loops with DOM manipulation. Its the first time i've had to use it. – brianchangdev Apr 07 '16 at 20:15

Using a loop to simplify DOM manipulation Vanilla JS

1 Answers1