Loading AddThis widget after the page loads

I have been working with AddThis for the past 3 days on and off. I have been trying to get it to load in the Javascript after the rest of the page loads. My reasoning for doing this is because I was looking to tie into an existing Javascript file that was included on all of the pages of a site to add the AddThis widget in. I was looking to load AddThis inside of an external Javascript file and I was so close! Here is what I was trying to inject into the code.

<div class="addthis_toolbox addthis_default_style" style="width:170px;position:absolute;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_googlebuzz"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID&domready=1"></script>

My initial approach was to try and load everything inside of a div element that I created inside the Javascript file.

// Adds AddThis code below the menu
	// &domready=1 prevents the js from AddThis from being loaded until after the dom has loaded all elements on the page.
	var menuPlaceholder = document.getElementById('ExistingDivID');
	newNode = document.createElement('div');
	newNode.id='social_media_toolbox';
	newNode.innerHTML = '<div class="addthis_toolbox addthis_default_style" style="width:170px;position:absolute;"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_delicious"></a><a class="addthis_button_googlebuzz"></a><a class="addthis_button_google"></a><a class="addthis_button_email"></a><a class="addthis_button_compact"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID&domready=1"></script>';
	menuPlaceholder.parentNode.insertBefore(newNode,menuPlaceholder.nextSibling);

The above worked excellent for embedding the code, but for some reason it wasn’t executing the AddThis Javascript file at the right time. I believed that using the #domready parameter it would pause on executing the code until after the new elements had been injected.

After a little bit of thinking and debating the issue, I decided it was probably an order of operating. Normally when you include the AddThis widget the html is rendered, and then the Javascript works in on it. However, the way I have it above the html AND Javascript are injected and rendered at the same time.

So I decided to try and load the script separately. My plan was to inject it as the last item on the page, right before the closing body tag.

// Adds AddThis code below the menu
	// &domready=1 prevents the js from AddThis from being loaded until after the dom has loaded all elements on the page.
	var menuPlaceholder = document.getElementById('ExistingDivID');
	newNode = document.createElement('div');
	newNode.id='social_media_toolbox';
	newNode.innerHTML = '<div class="addthis_toolbox addthis_default_style" style="width:170px;position:absolute;"><a class="addthis_button_facebook"></a><a class="addthis_button_twitter"></a><a class="addthis_button_linkedin"></a><a class="addthis_button_delicious"></a><a class="addthis_button_googlebuzz"></a><a class="addthis_button_google"></a><a class="addthis_button_email"></a><a class="addthis_button_compact"></a></div>';
	menuPlaceholder.parentNode.insertBefore(newNode,menuPlaceholder.nextSibling);

	addthisScript = document.createElement('script');
	addthisScript.src = 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID&domready=1';
	document.body.appendChild(addthisScript);

Lo-and-behold, the AddThis widget loaded up like a champ! So if you are having trouble loading your AddThis widget from a Javascript file, chances are it has to do with the order it is executing.