html - JavaScript Creating Buttons in a loop -

i want break , center after each button, suggestions? setattribute did not work , not add breaks

for (var j = 0; j <= 6; j++) {    var btn = document.createelement("button");    var t = document.createtextnode(sm[j] + " " + sy[j]);    btn.appendchild(t);    document.body.appendchild(btn);  }

jsfiddle

html

<div id='theparent' class='center_the_stuff'>  </div> 

js

function addinput(type, value, name, id, onclick, parentid) {     //create input type dynamically.        var element = document.createelement("input");     //assign different attributes element.      element.type = type;     element.value = value; // really? want default value type string?     element.name = name; // , name too?     element.id = id;     element.onclick = onclick;      var parent = document.getelementbyid(parentid);     //append element in page (in span).       parent.appendchild(element); }  function addbreak(parentid) {     var br = document.createelement("br");     var parent = document.getelementbyid(parentid);     parent.appendchild(br); }  window.onload = function () {     (var j = 0; j <= 6; j++) {         var temp = 'mybutton' + j;         addinput('button', temp, temp, temp, undefined, 'theparent');         addbreak('theparent');     } } 

css

.center_the_stuff {     text-align: center; }