将表单和输入复选框动态添加到 HTML 问题答案

【问题标题】：Adding forms and input checkboxes dynamically to HTML issue将表单和输入复选框动态添加到 HTML 问题
【发布时间】：2014-03-07 22:04:34
【问题描述】：

我正在尝试动态添加表单和输入复选框。下面是 Javascript 代码。我想要在每个复选框之前添加一些 html，以便用户知道该复选框的用途。此代码首先添加复选框的所有描述，然后添加所有复选框。知道如何纠正这个问题吗？

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);
}

【问题讨论】：

尝试使用innerHTML+=someString;，而不是使用form.appendChild(new Text(someString);。
试过了。不工作。给出错误
什么是错误描述？
这行得通：form.appendChild(document.createTextNode("text"));
那么你应该回答你自己的问题。或者让我回答你的解决方案。

标签： javascript html forms input checkbox

【解决方案1】：

交替使用.innerHTML 和.appendChild() 可能会导致您描述的订购问题。不要使用innerHTML+=text 添加到元素的innerHTML，而是使用form.appendChild(document.createTextNode(text) 追加一个新的文本节点。

所以，替换这一行：

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

用这个：

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

【讨论】：