Question

如果标题毫无意义，我很抱歉。我正在尝试将文本输入添加到数组中，然后我想将其转换为可视列表。但是，当使用innerHTML将字符串放入div时，它会打印整个数组，而不是仅添加新的字符串。这是我的代码：

var nameList = [];

    function addToList(frm) {
        var list = document.getElementById("list");

        if(frm.name.value !== "") {
            nameList.push(frm.name.value);
        } else {
            alert("Not a name.");
        };

        for(var i=0, len=nameList.length; i<len; i++) {
            list.innerHTML += "<div>"+nameList[i]+"</div>";
        };
    }

Answer 1

每次调用函数时，您都会从0数组索引开始，因此每次调用它时都会迭代整个数组。如果您只想在添加时输出最新值，请在每次调用函数时忘记循环并输出frm.name.value。

Answer 2

你可以放弃整个for循环。每次推送名称时，只需将该名称添加到innerHTML即可。无需每次都遍历整个列表。

var nameList = [];

function addToList(frm) {
    var list = document.getElementById("list");

    if(frm.name.value !== "") {
        nameList.push(frm.name.value);
        list.innerHTML += "<div>"+frm.name.value+"</div>";
    } else {
        alert("Not a name.");
    };
}

注意：我保留您的数组，假设它已在所提供的代码段之外的其他位置使用。

Answer 3

如果您只是在调用函数时将新项目附加到数组和HTML中，则不需要遍历数组中的所有项目并将它们附加到HTML中;您只需将"<div"+frm.name.value+"</div>"添加到HTML。

即可

如果自上次调用函数以来其中一个元素发生了变化，那么您只需遍历所有数组元素。

在不相关的说明中，当您只是将HTML附加到元素时，如果您使用element.insertAdjacentHTML("beforeend",yourHTML);而不是element.innerHTML += yourHTML;，则会看到主要的性能提升。查看jsperf test here以便亲眼看看！

Answer 4

我认为你的问题不是那么清楚。

我认为你要做的是将目前输入的值放在一个数组中，同时你想在屏幕上显示它们吗？

for(var i=0, len=nameList.length; i<len; i++) {
            list.innerHTML += "<div>"+nameList[i]+"</div>";
        };

您正在运行的上述代码不正确。 +=在这里无效，因为它会添加你已经呈现的html，这是不对的。

list.innerHTML = "<div>"+nameList[i]+"</div>";

如果你想这样做。

innerHTML在通过增加数组循环时添加重复项

4 个答案: