重写appendChild()

Question

我正在尝试覆盖appendChild方法，这样我就可以控制动态创建的元素，并在插入到页面之前根据需要修改它们。我尝试使用这个示例代码，只是想看看是否可以这样做：

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

当我尝试在下面的代码之后加载examples.However时，它适用于简单的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

不建议覆盖本机函数，但如果这样做，请确保同时返回附加的元素，以防止使用本机"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);
};