Javascript - innerHTML屬性

Question

我使用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> 

任何想法？

Answer 1

當您修改innerHTML它會立即被解析到DOM中...所以您已經有效地添加了一個select元素，然後在預期層次結構中添加了一堆option元素。

所以，你可以：

1. 建立你的整個組合框標記和然後它添加到 innerHTML
2. 或使用DOM方法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);

Answer 2

不要使用+=與innerHTML，除非你是追加全面完成 HTML。

因此，您應該創建一個字符串，var str = ""; ... str += "...";，然後附加：P2_txt.innerHTML += str;。