动态添加DOM后报document.getElementById(...) is null错误排查

1. JS运行器报错原因 #

你的addChildFilter函数依赖动态生成的DOM元素：对应field-xx的下拉框只有点击「添加过滤器组」按钮（#addFilter）之后才会被插入到页面中。JS运行器通常会在页面初始加载完成后直接执行所有JS代码，此时动态DOM还未生成，如果运行器主动调用了addChildFilter，自然找不到对应元素，抛出document.getElementById(...) is null错误。
而你在实际浏览器中使用时，是先点击添加按钮生成对应DOM，再触发addChildFilter调用，所以不会触发报错。

2. 点击按钮表单清空原因 #

你用来触发addChildFilter的元素是<a>标签，既没有设置href属性也没有阻止默认点击行为，部分浏览器会将无href的<a>标签识别为跳转锚点，点击后默认刷新当前页面，导致表单内已输入的内容全部丢失。

修复方案 #

修复点击表单清空问题 #

两种方案二选一即可：

• 方案1：拼接HTML时给<a>标签添加href="javascript:void(0)"属性，阻止默认跳转行为：

let html = /* 前面的代码保持不变 */ +
'<a href="javascript:void(0)" onclick="addChildFilter('+id1+', '+id2+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">' +
/* 后面的代码保持不变 */

• 方案2：在addChildFilter函数末尾添加return false;阻止事件冒泡和默认行为。

优化代码避免运行器报错 #

给函数添加非空判断，即使元素不存在也不会抛出异常：

function addChildFilter(id1, id2) {
    let field_id = id1.replace('div', 'field');
    let fieldEl = document.getElementById(field_id);
    if (!fieldEl) {
        alert('请先生成过滤器组再操作');
        return false;
    }
    let field = fieldEl.value;
    alert(field);
    return false;
}

可选优化（推荐） #

你当前拼接onclick传参的方式需要手动处理引号嵌套，容易出错，建议改用事件委托的方式绑定点击事件，更安全可靠：

1. 拼接HTML时给添加子组的<a>标签新增自定义类add-child-filter，移除onclick属性
2. 新增事件委托绑定逻辑：

$(document).on('click', '.add-child-filter', function() {
    // 自动查找当前所属的过滤器组DOM，不需要手动传参
    const filterDiv = $(this).closest('.filter');
    const id1 = filterDiv.attr('id');
    const id2 = id1.split('-')[1];
    addChildFilter(id1, id2);
    return false;
})

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