jQuery replaceWith未替换模态框元素反而追加到body末尾问题求助

问题核心原因 #

你返回的res.html存在HTML语法错误，查看你提供的res.html片段可以看到，<div class="modal-dialog wide-modal" role="document">对应的闭合标签被误写为<div>（缺少斜杠），而非正确的</div>，导致整段模态框的HTML结构不完整。

异常现象原理 #

jQuery的replaceWith方法在传入结构残缺的HTML片段时，浏览器内置的HTML解析器会自动尝试补全残缺标签，这种自动补全逻辑会把无法识别归属的节点直接挂载到document.body的末尾，无法完成你预期的「替换原有#requestModal节点」的操作，最终就出现了旧模态框节点依然存在、新的模态框内容跑到页面底部的现象。
其他场景能正常运行是因为其他接口返回的HTML结构是完整合法的，不存在标签未闭合的问题。

修复方案 #

1. 优先修正后端接口返回的HTML结构，把modal-dialog节点对应的错误闭合标签<div>改为</div>，保证整段模态框HTML语法合法。
2. 可选增加代码健壮性处理，避免后续类似语法问题导致异常：

$(document).on('click', '#por-detail-tbl .dropdown-menu', e => {
    // 如果模态框处于打开状态，先销毁旧实例避免残留样式/节点干扰
    const oldModal = $('#requestModal');
    if (oldModal.length) {
        oldModal.modal('hide').data('bs.modal', null);
    }

    $.get(`/projects/${$(e.target).attr('project-id')}`, res => {
        // 先通过临时容器解析返回的HTML，校验目标节点是否存在
        const tempContainer = $('<div/>').html(res.html);
        const newModal = tempContainer.find('#requestModal');
        if (newModal.length) {
            oldModal.replaceWith(newModal);
        }
        // ...后续填充隐藏域的代码
    })
})

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