Javascript - innerHTML属性

时间:2012-11-27 20:14:06

标签: javascript html 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>';
    }   
}

但是,当我运行它时,会生成以下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>

有什么想法吗?

2 个答案:

答案 0 :(得分:7)

当您修改innerHTML时,它会立即被解析为DOM ...因此您有效地添加了一个select元素,后跟一堆option元素,而不是预期的层次结构。

所以,你要么:

  1. 构建整个组合框标记,然后将其添加到 innerHTML
  2. 使用DOM方法createElementappendChild等等而不是丑陋的字符串连接。
  3. 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;