javascript - 检测DOM中的更改(Detect changes in the DOM)

Question

I want to execute a function when some div or input are added to the html.

(当某些div或输入添加到html时，我想执行一个函数。)

Is this possible?

(这可能吗？)

For example, a text input is added, then the function should be called.

(例如，添加文本输入，然后应调用该函数。)

  ask by esafwan translate from so

Answer 1

This is the ultimate approach so far, with smallest code:(到目前为止，这是使用最小的代码的最终方法：)

IE9+, FF, Webkit:

(IE9 +，FF，Webkit：)

Using MutationObserver and falling back to the deprecated Mutation events if needed:

(使用MutationObserver并在需要时回退不赞成使用的Mutation事件 ：)

(Example below if only for DOM changes concerning nodes appended or removed)

(（如果仅针对与附加或删除的节点有关的DOM更改，则下面的示例）)

 var observeDOM = (function(){ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; return function( obj, callback ){ if( !obj || !obj.nodeType === 1 ) return; // validation if( MutationObserver ){ // define a new observer var obs = new MutationObserver(function(mutations, observer){ callback(mutations); }) // have the observer observe foo for changes in children obs.observe( obj, { childList:true, subtree:true }); } else if( window.addEventListener ){ obj.addEventListener('DOMNodeInserted', callback, false); obj.addEventListener('DOMNodeRemoved', callback, false); } } })(); //------------< DEMO BELOW >---------------- // add item var itemHTML = "<li><button>list item (click to delete)</button></li>", listElm = document.querySelector('ol'); document.querySelector('body > button').onclick = function(e){ listElm.insertAdjacentHTML("beforeend", itemHTML); } // delete item listElm.onclick = function(e){ if( e.target.nodeName == "BUTTON" ) e.target.parentNode.parentNode.removeChild(e.target.parentNode); } // Observe a specific DOM element: observeDOM( listElm, function(m){ var addedNodes = [], removedNodes = []; m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes)) m.forEach(record => record.removedNodes.length & removedNodes.push(...record.removedNodes)) console.clear(); console.log('Added:', addedNodes, 'Removed:', removedNodes); }); // Insert 3 DOM nodes at once after 3 seconds setTimeout(function(){ listElm.removeChild(listElm.lastElementChild); listElm.insertAdjacentHTML("beforeend", Array(4).join(itemHTML)); }, 3000); 

 <button>Add Item</button> <ol> <li><button>list item (click to delete)</button></li> <li><button>list item (click to delete)</button></li> <li><button>list item (click to delete)</button></li> <li><button>list item (click to delete)</button></li> <li><em>&hellip;More will be added after 3 seconds&hellip;</em></li> </ol>