Running javascript code after DOM has been updated from previous code

Question

I'm pulling in a google news feed, then trying to take out some mal-formatting by accessing the newly-created DOM elements.

var aryClassElements = document.getElementById('google-news').getElementsByTagName('div');
alert("Found "+aryClassElements.length+" divs in Google News");

But this alert shows 0. It hasn't found the newly-created DOM elements. Ack!

If I add an extraneous alert ("hello world") in between loading the google news feed and asking the dom for div elements in google-news, it finds 20 div elements. I assume the user response time to click "OK" lets the DOM update.

Is there some plain javascript (not jquery) that will accomplish the same result?

Tx!

You are probably making your check before loading the Google News feed has been finished. You would have to add the check to the onload event that your loading process surely offers. What are you using to load the news? — Pekka
– Pekka, Commented Jan 28, 2010 at 22:19
The Google News feed is loading after the browser's onload event has fired, as is the subsequent code. — Summer
– Summer, Commented Jan 28, 2010 at 22:32

slebetman · Accepted Answer · 2010-01-28 22:23:24Z

1

If google-news provides callback hooks or pseudo events that you can attach functions to then use that. Most javascript API's have them these days. So my first recommendation is to read the documentation for it.

If not, then you can poll with setTimeout, say once per second, and execute your function when found:

function pollDOM () {
    var aryClassElements =
            document.
                getElementById('google-news').
                getElementsByTagName('div');

    if (aryClassElements.length) {
       // do stuff here;
    }
    else {
        setTimeout(pollDOM,1000);
    }
}
pollDOM();

answered Jan 28, 2010 at 22:23

slebetman

115k19 gold badges147 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Summer Over a year ago

The odd thing is, I think I AM using the google news callback hook... ah, maybe not... thanks for pointing me in the right direction, I think I'll be able to get there from here. Gracias all!

Teja Kantamneni · Accepted Answer · 2010-01-28 22:20:37Z

0

use setTimeout to create a artificial delay. The better way of doing it will be if you are using ajax to load the contents, on ajax complete, you set the new html and then try to find the DOM elements.

answered Jan 28, 2010 at 22:20

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

1 Comment

Summer Over a year ago

I am using Ajax to load the contents, using google's jsapi library. The code loads a feed url (in this case, news.google.com/news/…) and appends elements to the DOM based on it. The last call is infodiv.appendChild(div); -- where infodiv is my <div id="google-news"> and div is the new element constructed from the feed. This appendChild call has happened BEFORE I try to access the children of <div id="google-news", hence my confusion...

Summer · Accepted Answer · 2010-01-28 23:37:35Z

0

To load the feed, I was using:

feed = new google.feeds.Feed(url);
feed.load(function(result) { [the function to add DOM elements here] }
[the function to read DOM elements here]

I just needed to restructure a little:

feed = new google.feeds.Feed(url);
feed.load(function(result) { 
  [the function to add DOM elements here]
  [the function to read DOM elements here]
}

And all is well! Rookie mistake, thanks you guys for pointing me in the right direction.

answered Jan 28, 2010 at 23:37

Summer

2,4983 gold badges23 silver badges32 bronze badges

Collectives™ on Stack Overflow

Running javascript code after DOM has been updated from previous code

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related