Using jQuery to change dynamic content?

I'm pretty new to using jQuery but am working on a Safari Extension at the moment and have run into a bit of a puzzle with appending some text to a page.

Basically, I am creating an extension that will append a specific string of text with another on the page within an element

<td id="name">foo</td>

Us开发者_开发知识库ing the following jQuery code

  jQuery("#name").filter(function() 
         {return jQuery(this).text() == 'foo'; }).append('bar');

This would result in

<td id="name">foobar</td>

This works great in a standard html page, however - the site I wish it to run on uses a different bit of JS to dynamically load the content within the element, so when testing it on the site, the element is listed as

<td id="name"></td>

and then the JS library adds the name to it, meaning I cannot append the text (the name appears in the browser window but not within the page's source). Is there a way I can get around this?

I've tried using

$(window).load()

Though this had no effect.

It just sounds like you need to delay your script so it will run after the other script that is writing "foo" runs. Generally jquery scripts are run on document load with

$(function(){ /* script */  });

so if that is too early you may need to bind to some event that is occuring when "foo" is written that you might have to hook onto your other script for. Its not clear from the question is this is an ajax thing that writes "foo" or just another script that doesn't have any additional load. You might want to post that.

If you still can't figure it out, you can always use a setTimeout() call to delay your script, but that is sloppy and not recommended.