使用 jQuery（或纯 JS）添加新的 DOM 元素

Posted 2023-05-09

【中文标题】使用 jQuery（或纯 JS）添加新的 DOM 元素

【英文标题】：Hook onto the adding of new DOM elements with jQuery (or plain JS)

【发布时间】：2010-10-27 23:56:22

【问题描述】：

明确一点：我不是在问如何将现有的钩子放到新的 DOM 元素上。我知道 live() 函数和旧的 livequery 插件。我在问别的问题。

我想知道的是如何挂钩新 DOM 元素的创建。我问的原因是我正在创建一个无法控制第一方脚本的第三方用户 JS 脚本。这些第一方脚本（经过混淆处理）通过添加新的 DOM 元素定期更新页面。我想在添加这些元素后执行代码。

使用 $( '...' ).bind( 'ajaxSuccess', function() .....) 适用于一些添加，但不是全部。

【参考方案1】：

如果它们总是通过 document.createElement 方法添加，您可以简单地替换它并在那里进行跟踪。

document.replacedCreateElement = document.createElement;
document.createElement = function(tagName) 
    this.replacedCreateElement(tagName);
    //do your tracking  

【讨论】：

有趣！我不知道我们可以像这样对核心函数进行别名/覆盖。

这正是 livequery 所做的。

当我尝试这个时，浏览器的 CPU 使用率猛增。我想这是太多的 DOM 蜘蛛。

【参考方案2】：

我不知道你为什么问你是否知道livequery。 Livequery 将允许您连接到任意新的 DOM 元素。除此之外，我唯一知道要做的就是挂钩 DOM 方法（例如 appendChild 等...）

集成到 jQuery 中的 live() 函数实际上并不是完整的 livequery 实现。 （Resig 认为在不增加代码大小的情况下集成太多功能）

在live()中，缺少的是以下类型函数：

$('*').livequery(function() 
 // do something
);

使用它，它应该会捕获任何添加。

【讨论】：

你能扩展一下吗？是否有超越新的 1.3 live() 功能的 livequery 功能？

live() 还不允许任意选择器。这是主要的限制。还有一些生命周期问题；它们都在 jquery 1.3 发行说明中。

是的，正是我的意思，我更新了使用 live 作为函数的示例。 对自己翻白眼这是漫长的一天。

【参考方案3】：

好吧，我选择了这对，它似乎会在 20 秒或更短的时间内触发所需的 DOM 更新：

$( '#someid' ).bind( 'ajaxSuccess', function()  ...  );
$( '#someid' ).ajaxSuccess( function( e, r, s )  ...  );

我宁愿不必依赖 livequery 来减慢页面加载速度，并且替换的CreateElement 解决方案会破坏 CPU。