如何检测 DOM 节点插入？ [复制]

Posted 2023-05-07

【中文标题】如何检测 DOM 节点插入？ [复制]

【英文标题】：How to detect DOM nodes insertion? [duplicate]

【发布时间】：2013-03-14 20:30:23

【问题描述】：

我需要检测 DOM 变化（尤其是在添加 DOM 元素时）。 这样可以在 Chrome、Firefox、IE9+ 中调用方法

假设我们有一个动态添加 li 的按钮，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<input id="btn" type="submit" value="Add Item"> 
<ul/>
<script type="text/javascript">
    $("#btn").click(function()
        $("<li />").html("item").appendTo("ul");
    )
</script>

我需要类似的东西来检测 li 添加例如：

onDomChange(function() 
    alert("DOM changed !");
);

我已经实现了这个解决方案： http://jsfiddle.net/Lcybj/ 但它只适用于 Chrome。

如何实现在3个浏览器上工作的解决方案？

【问题讨论】：

我找到了很多解决方案，例如：jsfiddle.net/Lcybj。这仅适用于一两个浏览器。

【参考方案1】：

有一些事件，但我认为并非所有浏览器都支持它们。看看这个（Row Mutation）：WIKI DOM EVENTS