動態向HTML問題添加表單和輸入復選框

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)附加一個新的文本節點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));