Watch a DOM property

Question

I'm trying to monitor the DOM element on a third-party website. The element is non-existent until a countdown timer reaches, then it is created.

I've had some success playing around with: document.getElementsByClassName('countdown ng-hide').length

when it changes from 0 to 1 I want to effect a function.

How would I do this? I've tried using a Mutation Observer but it won't let me observe a null node.

Thanks!

EDIT: This is what I've got so far.

var timesDone = 0; 
var songID = 0; 
function clickit(xsongID) { 
if(document.getElementsByClassName('lottery-countdown ng-hide').length == 1) { 

document.getElementsByClassName('media submission ng-scope')[xsongID].click(); songName = document.getElementsByClassName('media-title submission-name ng-binding')[xsongID].outerHTML; timesDone++; } 

} 
setInterval(clickit, 29900, songID); 

Answer 1

I did this recently by setting up an Interval function like this :

var timesTest = 0;
var checkExists = setInterval(function() {
    if ($('.yourClassElement').length) {
       // ok element found : do your stuff and clear the Interval...
       // stuff...
       clearInterval(checkExists);
       timesTest = 0;
     }
     timesTest++;
     // I won't let this run more than 5 seconds, so :
     if (timesTest*100 > 5000)
        clearInterval(checkExists);
}, 100);