我正在尝试动态创建一些元素,然后希望将其作为子元素附加到 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);
答案 0 :(得分:0)
您的代码正在运行。我只是将标签的 for 属性的分配更改为 label_input.htmlFor = input.id;
(您只有 'input' 这是一个对象,而不是一个字符串)。
除此之外,我不知道你为什么给 func() 提供 'obj.ID',因为它总是与 for 循环中最后一次迭代的值相同。在下面的示例中,我将其更改为 func(this.parentNode.id);
,因为您将 'obj.ID' 作为 'id' 提供给包含的 div。
工作示例:
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>