在天气查询AJAX功能中如何在HTML模态框使用JS变量newDate？

我编写了如下用于获取天气的JavaScript AJAX函数：

function getWeather(countryName) {
    const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
    ];

    let dateObj = new Date();
    let month = monthNames[dateObj.getUTCMonth()];
    let day = dateObj.getUTCDate() - 1;
    let year = dateObj.getUTCFullYear();

    let newDate = `${month} ${day}, ${year}`;
    
    $.ajax({
        url: "assets/geojson/countryBorders.geo.json",
        type: "GET",
        dataType: "json",
        data: {
            
        },
        success: function(result) {
.... etc

我希望在用于展示各国天气的HTML模态框中显示日期等信息，该模态框代码如下：

<div class="modal-body">
          <h6 id="capitalCity" class="modal-sub-header"></h6>
          <hr>
          <ul class="dem">
              <p class="date" id="newDate"></p>

请问是否可以在该HTML模态框中使用上述JavaScript变量newDate的内容？

当然可以，只需要把newDate的值赋值给模态框中对应ID的DOM元素即可，以下是两种常用实现方式：

方式一：定义变量后直接赋值（模态框已存在于DOM时） #

在getWeather函数里定义完newDate后，直接通过jQuery或原生JS修改DOM内容：

jQuery写法： #

let newDate = `${month} ${day}, ${year}`;
// 将日期赋值给模态框的对应元素
$('#newDate').text(newDate);

原生JavaScript写法： #

let newDate = `${month} ${day}, ${year}`;
// 将日期赋值给模态框的对应元素
document.getElementById('newDate').textContent = newDate;

方式二：在AJAX成功回调中赋值（模态框随请求结果显示时） #

如果模态框是在AJAX获取数据后才触发显示，把赋值逻辑放在success回调里更稳妥，能确保DOM元素已准备就绪：

success: function(result) {
    // 其他业务处理逻辑...
    // 赋值日期
    $('#newDate').text(newDate);
    // 或者用原生JS：document.getElementById('newDate').textContent = newDate;
    // 这里添加显示模态框的代码，比如 $('#yourModalId').modal('show');
}

注意：要保证执行赋值代码时，ID为newDate的<p>标签已经存在于页面DOM中，否则会因找不到元素导致赋值失败。如果模态框是动态生成的，需要等它被添加到DOM后再执行赋值操作。

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