jQuery追加元素未即时显示，需刷新页面才出现的问题

问题根源 #

你当前的代码中，生成历史按钮的for循环仅在页面首次加载时执行一次。当点击搜索按钮将新城市添加到cities数组和localStorage后，并没有触发新的按钮生成逻辑，因此新城市对应的按钮只能等页面刷新、循环重新执行后才会显示。

解决步骤 #

1. 将生成按钮的逻辑封装成独立函数，让每次添加新城市后都能调用它更新页面
2. 调用函数前清空历史容器，避免重复生成相同按钮
3. 确保页面加载时先从localStorage读取cities数组（你当前代码未体现这一步，这也是初始化时可能无历史按钮的原因）

修改后的完整代码 #

// 页面加载时先从localStorage读取cities数组，无数据则初始化空数组
let cities = JSON.parse(localStorage.getItem("cities")) || [];

btnIcon.addEventListener("click", function (e) {
    e.preventDefault();

    var searchInput = document.querySelector("#search-input").value.trim();
    // 空输入直接返回，不处理
    if (!searchInput) return;

    if (!cities.includes(searchInput)) {
        cities.push(searchInput);
        localStorage.setItem("cities", JSON.stringify(cities));
        // 添加新城市后立刻调用渲染函数更新按钮
        renderCities();
    }

    queryURL = "https://api.openweathermap.org/data/2.5/weather?q=" + searchInput + apiKey;
    getWeather(queryURL);
})

// 封装渲染历史按钮的函数
function renderCities() {
    // 先清空容器，避免生成重复按钮
    $("#history").empty();
    for (var i = 0; i < cities.length; i++) {
        var button = $("<button>")
            .text(cities[i])
            .attr("id", cities[i])
            .on("click", function () {
                queryURL = "https://api.openweathermap.org/data/2.5/weather?q=" + $(this).attr("id") + apiKey;
                getWeather(queryURL);
            });
        $("#history").prepend(button);
    }
}

// 页面初始化时渲染已有历史按钮
renderCities();

关键改动说明 #

• 新增renderCities()函数，将原按钮生成逻辑移入，每次调用都会重新渲染所有历史按钮
• 在搜索添加新城市后，立刻调用renderCities()实现按钮即时更新
• 页面加载时优先从localStorage读取cities，避免初始数组为空
• 给输入值添加trim()，防止空字符串或空格被存入数组
• 渲染前清空#history容器，避免重复生成按钮

内容的提问来源于stack exchange，提问作者Matthew Osborne