我正在使用innerHTML函数在HTML中动态创建一个下拉菜单,并使用某些参数填充它。这是我的代码:
for (i in categories) {
var cat_name = i;
var cats = categories[cat_name];
P2_txt.innerHTML += cat_name;
if (cats.length > 2) {
// Drop Down Menu Needed
P2_txt.innerHTML += '<select>';
for (var j = 0; j < cats.length; j++) {
P2_txt.innerHTML += '<option>'+cats[j]+'</option>';
}
P2_txt.innerHTML += '</select>';
}
}
但是,当我运行它时,会生成以下HTML代码:
<select></select>
<option>Value of cats[0]</option>
<option>Value of cats[1]</option>
<option>Value of cats[2]</option>
而不是我想要的,这是:
<select>
<option>Value of cats[0]</option>
<option>Value of cats[1]</option>
<option>Value of cats[2]</option>
</select>
有什么想法吗?
答案 0 :(得分:7)
当您修改innerHTML
时,它会立即被解析为DOM ...因此您有效地添加了一个select
元素,后跟一堆option
元素,而不是预期的层次结构。
所以,你要么:
innerHTML
createElement
和
appendChild
等等而不是丑陋的字符串连接。
var categories = {
"Domestic": ["Tabby", "Siamese"],
"Wild": ["Cougar", "Tiger", "Cheetah"]
},
cats,
combo,
frag = document.createDocumentFragment();
for (var category in categories) {
cats = categories[category];
frag.appendChild(document.createTextNode(category));
combo = document.createElement("select");
for (var i = 0, ln = cats.length; i < ln; i++) {
combo.appendChild(document.createElement("option")).textContent = cats[i];
}
frag.appendChild(combo);
}
document.body.appendChild(frag);
答案 1 :(得分:3)
除非您附加完整 HTML,否则切勿将+=
与innerHTML
一起使用。
因此,您应该创建一个字符串var str = ""; ... str += "...";
,然后添加:P2_txt.innerHTML += str;
。