Adding forms and input checkboxes dynamically to HTML issue

Question

I am trying to add forms and input checkboxes dynamically. Below is the Javascript code. I want some html before each checkbox so that user knows what that checkbox is for. This code adds all the description of the checkboxes first and then all the checkboxes. Any idea how can I rectify this?

for (var i = 0; i < obj.menu_item.modifier_groups.length; i++) {
    var div = document.getElementById("modifiers");
    var form = document.createElement("form");
    var chr = i.toString();
    chr = "form".concat(chr);
    form.setAttribute("name", chr);
    form.setAttribute("id", chr);
    form.modifier_group_name = obj.menu_item.modifier_groups[i].modifier_group_name;
    form.min_modifier_selection = obj.menu_item.modifier_groups[i].min_modifier_selection;
    form.max_modifier_selection = obj.menu_item.modifier_groups[i].max_modifier_selection;
    document.getElementById("modifiers").innerHTML += "<br><br>" + obj.menu_item.modifier_groups[i].modifier_group_name + ":<br>";
    for (var j = 0; j < obj.menu_item.modifier_groups[i].modifiers.length; j++) {
        document.getElementById("modifiers").innerHTML += obj.menu_item.modifier_groups[i].modifiers[j].modifier_name;
        var input = document.createElement("input");
        input.setAttribute("type", "checkbox");
        input.setAttribute("value", obj.menu_item.modifier_groups[i].modifiers[j].modifier_id)
        input.modifier_id = obj.menu_item.modifier_groups[i].modifiers[j].modifier_id;
        input.modifier_name = obj.menu_item.modifier_groups[i].modifiers[j].modifier_name;
        input.is_default = obj.menu_item.modifier_groups[i].modifiers[j].is_default;
        if (input.is_default == true) input.setAttribute("checked", true);
        form.appendChild(input);
    }
    div.appendChild(form);
}

Try instead of using innerHTML+=someString;, use form.appendChild(new Text(someString);. — Robin
– Robin, Commented Mar 7, 2014 at 22:09
This worked: form.appendChild(document.createTextNode("text")); — BrownTownCoder
– BrownTownCoder, Commented Mar 7, 2014 at 22:40
Then you should answer your own question. Or let me answer with your solution. — Robin
– Robin, Commented Mar 7, 2014 at 22:43

Robin · Accepted Answer · 2014-03-07 23:01:03Z

1

Using .innerHTML and .appendChild() interchangeably can cause ordering problems like the one you're decribing. Instead of adding to the element's innerHTML using innerHTML+=text, append a new text node using form.appendChild(document.createTextNode(text).

So, replace this line:

document.getElementById("modifiers").innerHTML += obj.menu_item.modifier_groups[i].modifiers[j].modifier_name;

with this:

form.appendChild(document.createTextNode(obj.menu_item.modifier_groups[i].modifiers[j].modifier_name));

answered Mar 7, 2014 at 23:01

Robin

7,9542 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding forms and input checkboxes dynamically to HTML issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related