通过JavaScript为一个div添加了两个按钮

Question

So, I have next code.

var form = [
    {
      type: 'button',
      label: 'Reset'
    },
    {
      type: 'button',
      label: 'Submit'
    }
  ];
for (var i = 0; i < form.length; i++) {
    var obj = form[i];
    var element = document.createElement("div");
    switch (obj.type) {
        case "button":
            var wrapHtml = document.createElement("div");
            var wrapHtmlAttr = document.createAttribute("class");
            wrapHtmlAttr.value = "buttons-group";
            wrapHtml.setAttributeNode(wrapHtmlAttr);
            var button = document.createElement('button');
            var textButton = document.createTextNode(obj.label);
            button.appendChild(textButton);
            wrapHtml.appendChild(button);
            element.appendChild(wrapHtml);

            break;
    }
    var div = document.getElementById("form");
    div.appendChild(element);
  }

Please, help to add these two buttons to one div buttons-group. May be I need to use closures? I don't understand... Please, help.

Example here

Answer 1

You've created 2 div.buttons-group in loop for. To add 2 buttons into one div just put

var element = document.createElement("div"); 

out-side of loop. For example:

var element = document.createElement("div");
var wrapHtmlAttr = document.createAttribute("class");
wrapHtmlAttr.value = "buttons-group";
element.setAttributeNode(wrapHtmlAttr);
for (var i = 0; i < form.length; i++) {
    var obj = form[i];
    switch (obj.type) {
        case "button":         
            var button = document.createElement('button');
            var textButton = document.createTextNode(obj.label);
            button.appendChild(textButton);
            element.appendChild(button);

            break;
    }
    var div = document.getElementById("form");
    div.appendChild(element);
  }