In our previous tutorial, we have explained how to convert CSV data to JSON with JavaScript. In this tutorial, you will learn how to Observe Changes in DOM using Mutation Observers in JavaScript when any element added, removed or attribute changed in DOM.
While loading dynamic data with Ajax, we append data with new HTML elements to already loaded HTML page. As the dynamic data HTML appended after DOM load, the existing front-end functionality will not work with new appended HTML element because the specific functions not initialize that new elements.
So we need to detect newly added DOM elements related to that specific functions and then we need to initialize that elements. If you’re struck with such problems and looking for solutions, then you’re here at right place.
The MutationObserver is a JavaScript browser API to detect DOM changes and it’s supported by all modern browsers. We will cover this tutorial with live demo to add dynamic element with attributes to page and then detect newly added element using MutationObserver API API.
(more…)