Determining if a HTML element has been added to the DOM dynamically

by

You can use Mutation Observers for this purpose – at least if you do not need to support IE/Opera.

Here’s a short example (taken from html5rocks.com) on how they are used:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        for(var i = 0; i < mutation.addedNodes.length; i++)
            insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document, {
    childList: true
});
console.log(insertedNodes);

Note the WebKit prefix. You need to use the browser-specific prefix. In Firefox it would be Moz instead.

2022 Update: You don’t need to use WebKit nor Moz as a preifx, as the majority of the browsers have implemented it. It is now accessible with MutationObserver.

More Related Contents:

  1. required field notification using jquery
  2. CSS or jQuery : How to get visible top [duplicate]
  3. Write tags in HTML and print
  4. Get this error: “Uncaught TypeError: Cannot read property ‘0’ of undefined”
  5. How can I determine the direction of a jQuery scroll event?
  6. Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
  7. How to use jQuery for XML parsing with namespaces
  8. AngularJS – Any way for $http.post to send request parameters instead of JSON?
  9. How to detect window.print() finish
  10. Create array of unique objects by property
  11. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  12. (Deep) copying an array using jQuery [duplicate]
  13. How to pull the file name from a url using javascript/jquery?
  14. convert Hsl to rgb and hex
  15. how to convert this nested object into a flat object?
  16. Replace only text inside a div using jquery
  17. Use variable outside the success function from an ajax/jquery call
  18. JavaScript reduce the size and quality of image with based64 encoded code
  19. jQuery + RGBA color animations
  20. Javascript Code works in jsfiddle and but not in the Browser [closed]
  21. How to trim() white spaces from a string?
  22. HTML5 responsive canvas: resizing the browser canvas draw disappear
  23. How to select an element loaded through the jQuery load() function?
  24. How to handle query parameters in angular 2
  25. jqPlot DateAxis tickInterval not working
  26. Can I get highlighted text with JQuery? [duplicate]
  27. Dealing with overlapping jQuery sortable lists
  28. Is there any way to check reachability test of server in jQuery
  29. Generate XML document in-memory with JavaScript
  30. parse xml response with jQuery

Leave a Comment