JavaScript cannot run <span> in innerHTML

Question

I'm trying to use ShareThis (A sharing tool) on my website.

I have an external JavaScript file that will imports all html codes by using innerHTML.

So the code basically runs like this:

document.getElementById("social_media").innerHTML = "<span class='st_facebook_large' displayText='Facebook'></span>";

And the Header contains all the necessary files to run this span tag

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "de187292-9a6b-41ad-b7c6-a041b541f753", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Ideally, <span class='st_facebook_large' will convert into a facebook share button, but I can't get the tag to work properly.

Please help, thanks so much.

Answer 1

Works fine for me.

Please make sure that

document.getElementById("social_media").innerHTML = "<span class='st_facebook_large' displayText='Facebook'></span>";

is called after the element with the id social_media was created but before the shareThis-Script runs.

It have to look somehow like this:

<div id="social_media"></div>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "de187292-9a6b-41ad-b7c6-a041b541f753", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script type="text/javascript">
    document.getElementById("social_media").innerHTML = "<span class='st_facebook_large' displayText='Facebook'></span>";
</script>

How to break my example: If you put the div at the bottom of the page it wont work. ;-)