For循环遍历数组仅显示最后一个值答案

【问题标题】：For loop through Array only shows last valueFor循环遍历数组仅显示最后一个值
【发布时间】：2023-03-19 04:19:01
【问题描述】：

我正在尝试遍历一个数组，然后使用 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。

【问题讨论】：

标签： javascript html arrays loops

【解决方案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 />";
}

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

【讨论】：

请注意 += 在 .innerHTML is not optimal 上。首选myList.insertAdjacentHTML('beforeend', htmlToAppend)

【解决方案2】：

我建议你先通过create element来做一个div。在那里你添加你的innerHTML，然后你可以做appendchild。这将非常适合这种类型的场景。

function displayCountries(countries) {
const countriesDiv = document.getElementById('countriesDiv');
countries.forEach(country => {
    console.log(country.borders);
    const div = document.createElement('div');
    div.classList.add('countryStyle');
    div.innerHTML = `
    <h1> Name : ${country.name.official} </h1>
    <h2> Capital : ${country.capital} </h2>
    <h3> Borders : ${country.borders} </h3>
    <img src="${country.flags.png}">
    `;
    countriesDiv.appendChild(div);
});

}

【讨论】：