如何用纯JavaScript实现DOM元素挂载到文档时触发的回调？

我完全懂你的困扰！很多人都会踩这个坑——以为调用parent.appendChild(child)就代表元素已经在页面上了，但其实如果父元素本身还没被加到DOM树里，那子元素只是在内存里“待着”，根本没真正挂载到文档。就像你举的例子：

const parent = document.createElement("div"); // 只创建了，没挂载到页面
const child = document.createElement("span");
parent.appendChild(child); // 子元素跟父元素绑定了，但俩都没在文档里

这种情况下，你没法预知什么时候这段DOM会被真正加到页面上（比如某个异步操作完成后，或者第三方库帮你挂载），但你又必须在元素真正挂载的那一刻执行代码——比如文本框自动调整高度的场景，元素没挂载时scrollHeight是0，那调整高度的代码直接失效。

之前你查的MutationObserver确实是解决这个问题的最优方案，我给你写个贴合你场景的具体实现，你可以直接用：

解决方案：用MutationObserver监听元素挂载 #

我们可以写一个复用的工具函数，专门用来监听元素是否真正挂载到文档中，一旦挂载就触发你需要的回调：

function onElementMounted(targetElement, callback) {
  // 先检查元素是不是已经挂载了
  const isMounted = () => {
    // document.contains 可以准确判断元素是否在文档的DOM树里
    if (document.contains(targetElement)) {
      callback();
      return true;
    }
    return false;
  };

  // 如果已经挂载，直接触发回调
  if (isMounted()) return;

  // 否则用 MutationObserver 监听文档的变化
  const observer = new MutationObserver(() => {
    if (isMounted()) {
      // 触发回调后就断开监听，避免浪费资源
      observer.disconnect();
    }
  });

  // 监听 body 下的所有子元素变化（包括嵌套的子树）
  observer.observe(document.body, {
    childList: true, // 监听子元素的添加/移除
    subtree: true    // 监听所有嵌套的子树变化
  });
}

怎么用到你的文本框自动调整高度场景里？ #

直接把你原来的调整高度代码放到这个工具函数的回调里就行，这样代码只会在文本框真正挂载到页面后执行：

// 假设你的文本框是从父元素里获取的（此时父元素还没挂载）
const textarea = parent.querySelector("textarea");

onElementMounted(textarea, () => {
  // 这里的代码只会在文本框真正挂载后执行
  textarea.style.height = textarea.scrollHeight + "px";
  textarea.style.overflowY = "hidden";

  textarea.addEventListener("input", function() {
    this.style.height = "auto";
    this.style.height = this.scrollHeight + "px";
  });
});

为什么这个方案靠谱？ #

1. 精准判断挂载状态：document.contains(targetElement)会检查元素的整个父链，只要最终连接到document，就会返回true——不管是直接挂载到body，还是嵌套了N层父元素，都能准确检测到。
2. 性能友好：MutationObserver是浏览器原生的异步监听API，比定时轮询（比如setInterval）高效得多，而且一旦检测到挂载就会立即断开监听，不会一直占用资源。
3. 兼容性好：MutationObserver支持所有现代浏览器，包括Chrome、Firefox、Edge，甚至IE11也支持（虽然IE11的API细节有点不同，但上面的代码在IE11也能跑）。

如果你需要兼容更旧的浏览器，或者想简化代码，也可以用targetElement.isConnected替代document.contains——这是HTML5新增的属性，直接返回元素是否连接到文档，用法更简洁，唯一的缺点是IE不支持。

备注：内容来源于stack exchange，提问作者Takeshi Tokugawa YD