For循环数组只显示最后一个值

IT技术 javascript html arrays loops
2021-03-07 20:53:39

我正在尝试遍历一个数组,然后使用 innerHTML 创建一个新的

  • 数组中每个条目的元素。不知何故,我的代码只显示数组中的最后一个值。我已经坚持了几个小时,似乎无法弄清楚我做错了什么。

    window.onload = function() {
    
    // Read value from storage, or empty array
    var names = JSON.parse(localStorage.getItem('locname') || "[]");
    var i = 0;
    
        n = (names.length);
        for (i = 0; i <= (n-1); i++) {
            var list = names[i];
            var myList = document.getElementById("list");
            myList.innerHTML = "<li class='list-group-item' id='listItem'>"+ list + "</li>" + "<br />";
        }
    }
    

    我的 HTML 中有一个带有 id 'list' 的 UL。

  • 1个回答

    改变你的for循环:

    for (i = 0; i <= (n-1); i++) {
        var list = names[i];
        var myList = document.getElementById("list");
        myList.innerHTML += "<li class='list-group-item' id='listItem'>"+ list + "</li>" + "<br />";
    }
    

    使用+=代替=除此之外,您的代码看起来不错。

    请注意,+=on.innerHTML 不是最佳的更喜欢myList.insertAdjacentHTML('beforeend', htmlToAppend)
    2021-04-24 20:53:39