Javascript-innerHTML属性

我正在使用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>';
    }   
}

for（类别中的i）{
变量cat_name=i；
var cats=类别[类别名称]；
P2_txt.innerHTML+=猫_名称；
如果（猫的长度>2）{
//需要下拉菜单
P2_txt.innerHTML+=''；
对于（var j=0；j

但是，当我运行它时，会生成以下HTML代码：

<select></select>
<option>Value of cats[0]</option>
<option>Value of cats[1]</option>
<option>Value of cats[2]</option>

猫的价值[0]
猫的价值[1]
猫的价值[2]

而不是我想要的，这是：

<select>
    <option>Value of cats[0]</option>
    <option>Value of cats[1]</option>
    <option>Value of cats[2]</option>
</select>

猫的价值[0]
猫的价值[1]
猫的价值[2]

---

有什么想法吗？

当您修改

innerHTML

时，它会立即解析到DOM中。。。因此，您已经有效地添加了一个

select

元素，后面是一组

选项

元素，这些元素都不属于预期的层次结构

因此，你可以：

构建整个组合框标记，然后将其添加到

innerHTML

或使用DOM方法和 以此类推，而不是丑陋的字符串串联

var类别={
“国内”：[“泰比”、“暹罗”]，
“野生”：[“美洲狮”、“老虎”、“猎豹”]
},
猫，
联合体，
frag=document.createDocumentFragment（）；
for（类别中的var类别）{
猫=类别[类别]；
frag.appendChild（document.createTextNode（category））；
combo=document.createElement（“选择”）；
对于（变量i=0，ln=cats.length；i文件.正文.附件（frag）当您修改
innerHTML
时，它会立即解析到DOM中。。。因此，您已经有效地添加了一个
select
元素，后面是一组
选项
元素，这些元素都不属于预期的层次结构

因此，你可以：

构建整个组合框标记，然后将其添加到
innerHTML
或使用DOM方法和
以此类推，而不是丑陋的字符串串联

var类别={
“国内”：[“泰比”、“暹罗”]，
“野生”：[“美洲狮”、“老虎”、“猎豹”]
},
猫，
联合体，
frag=document.createDocumentFragment（）；
for（类别中的var类别）{
猫=类别[类别]；
frag.appendChild（document.createTextNode（category））；
combo=document.createElement（“选择”）；
对于（变量i=0，ln=cats.length；i文件.正文.附件（frag）除非附加完整的HTML，否则切勿将
+=
与
innerHTML
一起使用

因此，您应该创建一个字符串，
var str=“”。。。str+=“…”
，然后附加：
P2_txt.innerHTML+=str
除非附加完整的HTML，否则切勿将
+=
与
innerHTML
一起使用

因此，您应该创建一个字符串，
var str=“”。。。str+=“…”
，然后附加：
P2_txt.innerHTML+=str
首先创建HTML字符串，然后将其分配给
.innerHTML
。首先创建HTML字符串，然后将其分配给
.innerHTML
。谢谢，这非常有用！谢谢，那很有用！