Jump to content

Fire function when html content changes


Recommended Posts



Im needing to fire a function when an ID is added to some html. The application has 3 steps and unfortunatly doesn have anything clear that defines the step in the html so the only way to detect this is acouple of IDs that are added for each step. So i have this js that uses a setTimeout to run the function until the ID is added.

function thirdFire() {    if (document.getElementById("localPayment_content")){    var div2 = document.createElement("div");div2.style.width = "100px";div2.style.height = "100px";div2.style.background = "blue";div2.style.color = "white";div2.innerHTML = "form";document.getElementById("localPayment_content").appendChild(div2);alert("SECOND");            } else {        clearTimeout(function() { thirdFire(); }, 1000);    }}setTimeout(function() { thirdFire(); }, 1000); 

But it means that i will have to create this for each step but doesn't always work for the other steps. Also have read not good to use this as it running in the background constantly. I have read abit about mutation events but cant figure this out to work for this situation. Any help much appreciated.

Edited by g3t
Link to comment
Share on other sites

If the application doesn't have a callback or anything as it completes the various steps, then you can use mutation observers to respond to things being added or changed in the DOM. It looks like those are only supported on the more recent browsers, so you could also detect whether they're supported and fall back to DOM mutation events otherwise.https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverhttps://developer.mozilla.org/en-US/docs/Web/Events

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...