无法将 JavaScript 元素附加到 Div

Question

我正在尝试动态创建一些元素，然后想将其作为子元素附加到 div。

我对其他两个 div 也做同样的事情，但对于第三个，它没有附加，而是扰乱了已经存在的静态 html div。

HTML：

<div id="codesDiv" style = "position: absolute; top:15%; left:55%;border: 1px solid black;height: 275px;width: 220px;display: block;z-index: 1;border: 1px solid #EEF6FB;border-radius:5px; background: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

    <input id="codes_Input" onkeyup="filter_category_Function()" type="text" placeholder="" style="position:relative; width:95%; border:1px solid #E5E5E5; margin-left:2.5%;margin-top:1%;border-radius:5px;"/>
                                            
    <div id = "dropdow_list_codes" style="position: relative;width:95%;height: 90%;margin-left:2.5%;margin-top:1%;overflow-y:auto; overflow-x:hidden;"></div>
</div>

JavaScript 元素：

        var div = document.createElement("div");
        div.style.width = "100%";
        div.style.height = "10%";
        div.style.position = "relative";
        div.id = "code-" + obj.ID;
        //div.className = "drop_down";
        //div.style.borderBottom = "1px solid #F3F6F8";
        
        var input = document.createElement("INPUT");
        input.setAttribute("type", "checkbox");
        input.style.width = "5%";
        input.style.height = "60%";
        input.style.top = "12%";
        input.style.position = "absolute";
        input.id = "code-check-" + i;
        
        input.addEventListener("click", function()
        {
            func(obj.ID);

        });
        
        var label_input = document.createElement("LABEL");
        label_input.id = "code-" + obj.Name;
        label_input.style.position = "relative";
        label_input.style.top = "-15%";
        label_input.style.left = "10%";
        label_input.style.marginBottom = "1%";
        label_input.setAttribute("for", input);
        label_input.style.fontFamily = "Roboto";
        label_input.style.fontSize = "11px";
        label_input.style.color = "#000";

        var label_Text = document.createTextNode(obj.Name);
        label_input.appendChild(label_Text);

        div.appendChild(input);
        div.appendChild(label_input);
        $('#dropdow_list_codes').append(div);

Answer 1

您的代码正在运行。我刚刚将标签的 for 属性的分配更改为 label_input.htmlFor = input.id;（您只有 'input' 这是一个对象，而不是字符串）。

除此之外，我不知道为什么要将 'obj.ID' 赋予 func()，因为它与 for 循环中最后一次迭代的值始终相同。在下面的示例中，我将其更改为 func(this.parentNode.id);，因为您将 'obj.ID' 给包含 div 作为 'id'。

工作示例：

var inputs = [
    {
        ID: "myID",
        Name: "myRadio"
    },
    {
        ID: "yourID",
        Name: "yourRadio"
    },
    {
        ID: "hisID",
        Name: "hisRadio"
    },
    {
        ID: "ourID",
        Name: "ourRadio"
    }
];

function func(id) {
    alert(id);
}

for (i = 0; i < inputs.length; i++) {

    var obj = inputs[i];
    
    var div = document.createElement("div");
    div.style.width = "100%";
    div.style.height = "10%";
    div.style.position = "relative";
    div.id = "code-" + obj.ID;
    
    var input = document.createElement("INPUT");
    input.setAttribute("type", "checkbox");
    input.style.width = "5%";
    input.style.height = "60%";
    input.style.top = "12%";
    input.style.position = "absolute";
    input.id = "code-check-" + i;
    
    input.addEventListener("click", function()
    {
        func(this.parentNode.id);
    });
    
    var label_input = document.createElement("LABEL");
    label_input.id = "code-" + obj.Name;
    label_input.style.position = "relative";
    label_input.style.top = "-15%";
    label_input.style.left = "10%";
    label_input.style.marginBottom = "1%";
    label_input.htmlFor = input.id;
    label_input.style.fontFamily = "Roboto";
    label_input.style.fontSize = "11px";
    label_input.style.color = "#000";

    var label_Text = document.createTextNode(obj.Name);

    label_input.appendChild(label_Text);
    div.appendChild(input);
    div.appendChild(label_input);
    $('#dropdow_list_codes').append(div);
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="codesDiv" style = "position: absolute; top:15%; left:55%;border: 1px solid black;height: 275px;width: 220px;display: block;z-index: 1;border: 1px solid #EEF6FB;border-radius:5px; background: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

    <input id="codes_Input" onkeyup="filter_category_Function()" type="text" placeholder="" style="position:relative; width:95%; border:1px solid #E5E5E5; margin-left:2.5%;margin-top:1%;border-radius:5px;"/>
                                            
    <div id = "dropdow_list_codes" style="position: relative;width:95%;height: 90%;margin-left:2.5%;margin-top:1%;overflow-y:auto; overflow-x:hidden;"></div>
</div>