Question

我正在尝试动态添加表单和输入复选框。以下是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);
}

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

动态添加表单和输入复选框以解决HTML问题

1 个答案: