使用jQuery设置HTML元素内容无效，求排查原因

我有如下HTML结构，想要设置id为capital的<p>元素内容：

<div class="modal-body">
  <p id="capital"></p>
</div>

对应的jQuery函数代码如下：

function getWeather() {    
    $.ajax({
        url: "assets/geojson/countryBorders.geo.json",
        type: "GET",
        dataType: "json",
        data: {},
        success: function(result) {
            let features = result["features"];

            let countryFeature = findFeatureFromName(countryName);
            let countryCode = JSON.stringify(countryFeature.properties.iso_a2).replace(/"/g,"")
    
            $.ajax({
                url: "assets/php/countryInformation.php",
                type: 'POST',
                dataType: 'json',
                data: {
                    country: countryCode
                },
                success: function(result) {
                    console.log(result);
                    console.log(JSON.stringify(result));
                    
                    let capitalCity = result['data'][0]['capital'];
                    console.log(capitalCity); // 这里能输出预期值，说明capitalCity已正确赋值
                    $('#capital').html(capitalCity);
                    // 也试过以下方法，均无效：
                    // $('#capital').text(capitalCity);
                    // document.getElementById("capital").innerHTML = capitalCity;
                }
            });
        }
    });
}

问题：所有设置元素内容的方法都无效，控制台没有报错，但capital元素内容始终不更新。

可能的原因及排查步骤 #

1. 目标DOM元素不存在或未正确加载

   • 在设置代码前加一行检测：

     console.log($('#capital').length);
     

     如果输出0，说明执行设置时元素还没被渲染到DOM里。比如这个元素在模态框中，而模态框是动态触发生成的，要确保设置代码在模态框完全渲染完成后执行（比如Bootstrap模态框的shown.bs.modal事件回调）。

2. 元素被重复渲染覆盖

   • 如果模态框是每次触发都重新生成DOM结构，那你提前设置的内容会被新渲染的空元素覆盖。这种情况要把赋值逻辑绑定到模态框的显示事件中，确保每次模态框打开时都重新赋值。

3. 元素被CSS隐藏导致看不到内容

   • 打开浏览器开发者工具的Elements面板，手动给#capital设置内容，看元素的innerHTML是否变化，同时检查元素的display、visibility、opacity等样式属性，确认内容不是因为样式问题被隐藏。

4. 页面存在重复ID

   • 在Elements面板搜索#capital，检查页面中是否有多个相同ID的元素。jQuery只会选择第一个匹配的元素，可能你设置的不是目标元素。

5. 异步执行顺序问题

   • 尝试延迟执行赋值代码，排除是否有其他异步操作干扰：

     setTimeout(() => {
         $('#capital').html(capitalCity);
     }, 100);
     

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