如何在DOM变更发生前触发审批提示？寻求拦截预变更的方法

首先得明确：原生的MutationObserver确实只能事后监听已经完成的DOM修改，没办法直接拦截还没发生的变更。不过我们可以通过重写DOM操作的原生API来实现前置拦截的效果，下面是具体的可行方案：

核心思路：给DOM操作API加“前置关卡” #

所有DOM变更（比如追加元素、修改innerHTML这些）最终都会调用浏览器提供的原生API，我们可以把这些API“包装”一层，在实际执行变更前插入确认弹窗，让用户决定要不要继续。

针对你的场景：拦截#main下的<p>追加操作 #

这里以appendChild为例（就是你场景里用到的追加元素方法），直接上代码：

// 先把原生的appendChild方法存起来，后面还要用
const originalAppendChild = Element.prototype.appendChild;

// 重写appendChild方法
Element.prototype.appendChild = function(child) {
  // 检查当前操作的目标是不是#main，且要追加的是<p>元素
  if (this.id === 'main' && child.tagName?.toLowerCase() === 'p') {
    // 弹出确认问询
    const isApproved = confirm("main div内即将发生DOM变更，将追加p元素。是否批准或拒绝该DOM变更？");
    if (!isApproved) {
      // 用户拒绝，直接返回，不执行原生的追加操作
      return child;
    }
  }
  // 用户批准了，就调用原生的appendChild完成变更
  return originalAppendChild.call(this, child);
};

扩展到更多DOM操作场景 #

如果你需要覆盖其他变更方式（比如insertBefore插入元素、replaceChild替换元素、修改innerHTML），可以用同样的思路包装对应的API：

• 对于innerHTML，可以重写它的setter，在赋值前做检查和确认
• 对于insertBefore，逻辑和上面的appendChild几乎一致，只是API参数略有不同

一些需要注意的细节 #

• 全局重写原生API可能和其他第三方库冲突，如果你只需要针对#main元素生效，可以单独给这个元素的方法做包装，而不是全局修改Element.prototype
• 一定要用call/apply绑定正确的this上下文，不然原生方法会执行出错
• 如果是React、Vue这类框架触发的DOM变更，因为框架有虚拟DOM层，直接包装原生API可能需要适配框架的渲染流程——比如在React里可以在状态更新前加确认，Vue里可以在watch或者beforeUpdate钩子中拦截

框架场景下的替代方案 #

如果你是用前端框架开发，可以直接在框架层面做拦截，比包装原生API更优雅：

• React：在调用setState修改会触发DOM变更的状态前，先弹出确认框；或者用useEffect监听状态变化，在DOM更新前做拦截
• Vue：在watch中监听对应的数据变化，在回调里先确认再允许更新；或者在beforeUpdate钩子中判断是否需要拦截

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