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);