javascript - 重写 appendChild()

Question

我正在尝试覆盖 appendChild 方法，以便我可以控制动态创建的元素并在插入页面之前根据需要修改它们。我尝试了这个示例代码，只是为了看看它是否可以完成:

var f = Element.prototype.appendChild;
Element.prototype.appendChild = function(){f.apply(this, arguments); };

它适用于简单的示例。但是，当我尝试在这段代码之后加载 jquery 时:

<script> 
    var f = Element.prototype.appendChild;
    Element.prototype.appendChild = function(){f.apply(this, arguments); };
</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

我得到这个错误:

Uncaught TypeError: Cannot read property 'selected' of undefined jquery.min.js:4
Uncaught TypeError: Cannot read property 'appendChild' of undefined

那么，为什么它不适用于 jquery 呢？有没有安全的方法来覆盖 appendChild ？

Answer 1

不建议覆盖 native 函数，但如果您这样做，请务必返回附加元素，以防止使用 native “appendChild”函数返回值的代码出现问题:

window.callbackFunc = function(elem, args) {
  // write some logic here
}
window.f = Element.prototype.appendChild;
Element.prototype.appendChild = function() {
    window.callbackFunc.call(this, arguments);
    return window.f.apply(this, arguments);
};