有没有办法用 document.createElement() 跟踪元素的创建？答案

【问题标题】：Is there any way to track the creation of element with document.createElement()?有没有办法用 document.createElement() 跟踪元素的创建？
【发布时间】：2014-04-15 22:09:59
【问题描述】：

有什么方法可以捕捉到document.createElement() 事件吗？

例如，某处，在我拥有的 <body> 部分内

<script>
    var div = document.createElement("div");
<script>

是否可以从 <head> 部分跟踪该事件（使用一些 addEventListener、突变观察者或任何其他方式）？

注意：我需要跟踪元素的创建，而不是插入

【问题讨论】：

几乎没有理由在 DOM 中发生这样的事件。你需要这个做什么？

标签： javascript dom dom-events mutation-observers

【解决方案1】：

警告此代码不适用于所有浏览器。就 IE 而言，所有的赌注都没有了。

(function() {
  // Step1: Save a reference to old createElement so we can call it later.
  var oldCreate = document.createElement;

  // Step 2: Create a new function that intercepts the createElement call
  // and logs it.  You can do whatever else you need to do.
  var create = function(type) {
    console.log("Creating: " + type);
    return oldCreate.call(document, type);
  }

  // Step 3: Replace document.createElement with our custom call.
  document.createElement = create;

}());

【讨论】：

捕获/显示创建事件..？我错过了那部分吗？我看到了console.log()，但不知何故，我期待一个实际的 JavaScript 事件。
那里有更好的cmets。
@DavidThomas：没有这样的事件。
@Bergi：我知道，这就是这个问题存在的原因，确定吗？
你可以为自己创建活动..看看我的回答

【解决方案2】：

与其他答案类似，这是一个不完美且不完整的解决方案（并且在仅 Windows 8.1 上的 Chrome 34 中明确测试过）：

// creating a function to act as a wrapper to document.createElement:
document.create = function(elType){
    // creating the new element:
    var elem = document.createElement(elType),
        // creating a custom event (called 'elementCreated'):
        evt = new CustomEvent('elementCreated', {
            // details of the custom event:
            'detail' : {
                // what was created:
                'elementType' : elem.tagName,
                // a reference to the created node:
                'elementNode' : elem
            }
    });
    // dispatching the event:
    this.dispatchEvent(evt);

    // returning the created element:
    return elem;
};

// assigning an event-handler to listen for the 'elementCreated' event:
document.addEventListener('elementCreated', function(e){
    // react as you like to the creation of a new element (using 'document.create()'):
    console.log(e);
});

// creating a new element using the above function:
var newDiv = document.create('div');

JS Fiddle demo.

参考资料：

【讨论】：

【解决方案3】：

可以在 javascript 中创建自定义事件。它也被所有浏览器支持。

查看：http://jsfiddle.net/JZwB4/1/

document.createElement = (function(){
    var orig = document.createElement;
    var event = new CustomEvent("elemCreated");
    return function() { 
        document.body.dispatchEvent(event);
        orig.call(document,x); 
    };
})();


document.body.addEventListener('elemCreated', function(){
    console.log('created');
},false);

var x= document.createElement('p'); //"created" in console

【讨论】：