Add Google plus +1 button dynamically and IE8 problem

Question

Are there any ways to add Google plus +1 button by js dynamically? I need that because a page has many URL's to share and they gotten by AJAX. So, when I get needed URL's I want to generate "+1"-s in some places of the page.

I have written test code which works in all browsers except IE8 (IE7 is not supported by Google at all):

<div class="googlePlusBtn"></div>
<a href="#" class="addGooglePlus">Click me!</a>

<script type="text/javascript">
jQuery(function(){
    jQuery('.googlePlusBtn').html('<g:plusone annotation="inline"></g:plusone>');
    jQuery('a.addGooglePlus').click(function()
    {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        return false;
    })
})
</script>

Could you please help me?

UPD: Fixed. The solution is below:

<div id="googlePlusBtn"></div>
<a href="#" class="addGooglePlus">Click me!</a>

<script type="text/javascript">
jQuery(function(){
            var po = document.createElement('g:plusone');
            var s = document.getElementById('googlePlusBtn');
        s.appendChild(po);
    jQuery('a.addGooglePlus').click(function()
    {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        return false;
    })
})
</script>

So, just changed create document method from jQuery to clean Javascript. IE8 works with that!

Friable

You should post your fix as an answer so that it can be marked as the correct answer. That will pull your question out of the unanswered list on SO. – Tendril

Thank you! I did not know... Done. – Friable

You can also accept your own answer (-: – Chemurgy

Answer 1

The solution is below:

<div id="googlePlusBtn"></div>
<a href="#" class="addGooglePlus">Click me!</a>

<script type="text/javascript">
jQuery(function(){
            var po = document.createElement('g:plusone');
            var s = document.getElementById('googlePlusBtn');
        s.appendChild(po);
    jQuery('a.addGooglePlus').click(function()
    {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        return false;
    })
})
</script>

So, just changed create document method from jQuery to clean Javascript. IE8 works with that!

Friable