innerHTML在递增数组中循环时添加重复项

innerHTML Adding Duplicates When Looping Through Increasing Array

本文关键字：添加 循环 数组 innerHTML      更新时间：2024-06-07

如果标题没有意义，我很抱歉。我正试图让文本输入将字符串添加到数组中，然后我想将其转换为视觉列表。但是，当使用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>";
        };
    }

您可以放弃整个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.");
    };
}

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

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

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

如果其中一个数组元素自上次调用函数以来可能发生了更改，则只需要循环遍历所有数组元素。

另一个无关的注意事项是，当您只是将HTML附加到元素时，如果使用element.insertAdjacentHTML("beforeend",yourHTML);而不是element.innerHTML += yourHTML;，您将看到性能的显著提高。在这里查看jsperf测试，亲自查看！

我觉得你的问题不太清楚。

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

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

您正在运行的上述代码是不对的。+=在这里是无效的，因为它会添加您已经渲染的任何html，这是不对的。

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

如果你想这样做。

相关文章：