如何获取ID动态生成的DIV元素并通过jQuery AJAX更新内容

我是JavaScript新手，现在有个很简单的需求不知道怎么实现。
我的HTML页面会生成一系列ID为动态生成的DIV元素。
示例：<div id="shots_234"></div>、<div id="shots_256"></div>
我现在发起一个jQuery AJAX请求，想要将接口返回的HTML内容填充到对应ID的DIV中。
我编写的代码如下：

function WeddingsShotDown(shotid, segmentid) {

    document.getElementById('ShotDownId').value = shotid;

    var form = document.getElementById('ShotDown');
    var formData = new FormData(form);
    var id = "shots_" + segmentid;
    var divid = document.getElementById(id);

    console.log("Div: " + divid);

    $.ajax({
        url: '/Weddings/ShotDown',
        type: 'POST',
        data: formData,
        dataType: 'html',
        processData: false,
        contentType: false,
        success: function (response) {
            if (response) {
                $("#shots_" + segmentid).html(response);
                document.getElementById('ShotId').value = "";
                showNotification("success", "Your shot sequence has been updated", "far fa-check-circle");
            } else {
                showNotification("danger", "Error saving shot sequence", "far fa-check-circle");
            }
        }
    });
}

但是不管是使用jQuery写法：

$("#shots_" + segmentid).html(response);

还是原生JavaScript写法：

var id = "shots_" + segmentid;
var divid = document.getElementById(id);

都无法获取到目标DIV元素，请问我要怎么才能正确更新该元素的内容？

你可以按以下顺序排查问题，90%以上的同类问题都是以下几个原因导致的：

• 确认元素是否已经插入DOM
  很多时候函数调用时机早于动态DIV生成的时机，此时DOM里还没有对应元素，自然获取不到。你可以在var divid = document.getElementById(id);这行代码前先打印整个页面的DOM内容，或者直接打开浏览器的元素检查面板，确认函数执行时目标DIV已经存在于页面中。
• 确认拼接的ID和实际ID完全一致
  在var id = "shots_" + segmentid;后添加一行日志：console.log('生成的ID为：', id)，对比控制台输出的ID和页面上实际DIV的ID是否完全匹配，注意ID是大小写敏感的，同时要检查segmentid是否携带多余的空格、特殊字符，或者传参错误。
• 确认页面无重复ID
  HTML规范要求ID全局唯一，如果页面存在多个相同ID的元素，选择器只会返回第一个匹配项，甚至返回null。你可以在浏览器控制台执行$("[id='"+id+"']").length，如果返回结果大于1，说明存在重复ID，需要调整动态生成ID的逻辑保证唯一性。
• 确认元素不在隔离DOM容器中
  如果目标DIV是放在iframe、自定义组件的Shadow DOM这类隔离的DOM容器里，直接用document.getElementById无法查询到。如果是iframe内的元素，需要先拿到iframe的contentDocument再查询；如果是Shadow DOM内的元素，需要先拿到组件的shadowRoot再查询。

你可以先在浏览器控制台直接执行document.getElementById('shots_xxx')（把xxx换成你实际的segmentid），如果能拿到元素，说明是函数执行时机或参数问题；如果拿不到，说明元素确实不在当前DOM的查询范围内，按上面的几个方向排查即可。

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