Question

我尝试使用ID＆＃34; row2＆＃34;替换td标记中的内容。

有人可以告诉我为什么innerHTML行不起作用吗？

var e = document.getElementById("location"); //location is the <select> ID
var area = e.options.selectedIndex;

if (area == 1) {
    var myRow = document.getElementById("row1");
    var array = ["item1", "item2", "item3"];
    var selectList = document.createElement("select");
    selectList.setAttribute("id", "mySelect");
    document.getElementById("row2").innerHTML = selectList

    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", array[i]);
        option.text = array[i];
        selectList.appendChild(option);
    }
}

Answer 1

您需要使用appendChild将新元素作为元素的子元素插入。

innerHTML是元素中的HTML文本，不应该为其分配元素。

请改为：

document.getElementById("row2").appendChild(selectList);

您可以在将innerHTML设置为""之前将其清除之前清除它，但它会计为DOM的两次更新，浏览器可能会重新绘制或重新计算页面两次而不是一次

更好的解决方案是使用replaceChild方法在一步中替换孩子：

var row2 = document.getElementById("row2");
if (row2.childNodes.length > 0) {
    /* there is already a child attached to the element, so replace it */
    row2.replaceChild(selectList, row2.childNodes.item(0));
} else {
    /* there is no child attached to the element, append it */
    row2.appendChild(selectList);
}

这些函数是W3C记录的Node接口的一部分，请查看：Interface Node

Answer 2

selectList不是HTML字符串。您必须像使用appendChild一样使用options。

更改

document.getElementById("row2").innerHTML = selectList;

以

document.getElementById("row2").innerHTML = ""; document.getElementById("row2").appendChild(selectList);

innerHTML =＆＃34;＆＃34;应该避免重复。请参阅JSFiddle的一个工作示例：http://jsfiddle.net/1zepb25q/1/

使用innerHTML（JS）插入select元素

2 个答案: