根本原因是操作 DOM 时目标节点未加载或已被移除，常见于 JS 执行过早、layui.use 外部访问未初始化元素、SPA 动态渲染时机不当等；应确保 DOM 就绪（如用 DOMContentLoaded）、在模块回调中操作、加防御性判断，并注意 Vue/React 混用时的 nextTick 和实例清理。
为什么 layui 里会报 Cannot set property 'innerHTML' of null
根本原因不是 layui 本身的问题，而是你在调用 layui 相关方法（比如 layer.msg()、form.render()、或手动操作表单元素）时，目标 DOM 节点还没加载出来，或者被误删/未正确渲染。常见于：在 中直接执行 JS；在 layui.use() 外部就访问尚未初始化的元素；或使用 v-if / display: none 隐藏了容器但没等它可见就操作其子节点。
检查并确保 DOM 已就绪再操作
不要依赖 layui.use() 的回调就默认 DOM 可用——它只保证模块加载完成，不保证页面结构已挂载。尤其在 SPA 或动态插入内容场景下更危险。
- 用
document.addEventListener('DOMContentLoaded', ...)包裹你的操作逻辑，确保 HTML 解析完毕 - 若操作的是
layui渲染后的元素（如laydate触发器、table容器），优先在对应模块的done回调或render后的success钩子里执行 - 避免在
layui.use(['form'], function(){ ... })的外层直接写document.getElementById('xxx').innerHTML = ...
layui 表单或弹层中动态插入内容的正确姿势
比如你想用 form.on('submit(...)', ...) 提交后更新某个 <div id="result"></div> 的内容，但报了 innerHTML 错误，说明 #result 元素不存在或已被移除。
- 先加防御性判断：
const el = document.getElementById('result'); if (el) el.innerHTML = 'success'; - 如果该
<div> 是由 <code>template或异步加载进来的，确保它在调用前已 append 到body或父容器中 - layui 的
layer.open()弹层内容如果是字符串模板，要确认其中的 ID 不重复、且不被其他 layer 实例提前销毁 - 慎用
layer.closeAll()——它可能把正在使用的容器也清掉了，导致后续getElementById返回null - 不要在
mounted()立即调用laydate.render({ elem: this.$refs.dateEl })，因为this.$refs.dateEl可能还是undefined - 改用
this.$nextTick(() => { laydate.render(...) })，确保 Vue 已将 ref 插入真实 DOM - 如果用了
v-if控制显示，记得在v-else或watch中清理旧的 layui 实例（如laydate.render().destroy()），否则残留实例可能试图操作已销毁的节点
容易被忽略的坑：layui + Vue/React 混用时的 DOM 时机错位
如果你在 Vue 组件里引入 layui（比如用 ref 拿到一个 <div> 再传给 <code>laydate.render()），Vue 的响应式更新和 layui 的 DOM 操作极易不同步。
