Adsense content just displaying blank square

Question

On my site, the AdSense content is loaded dynamically via javascript. The article content is retrieved via AJAX then displayed on the page. When it is displayed, the AdSense code is appended to the article.

You can see it in action at: http://thepresslist.com.au/

The code should appear just above where you can see the word 'Advert'. On my end, I can only see a blank area where the ad should appear, but no ad. Looking at the source of the final page, the code appears to be correct. AdBlock is disabled and Javascript is on. I see no obvious errors in my AdSense account.

Is anyone able to shed some light onto why no ads are displayed?

This is the code that generates the ad placement (the array is the Google AdSense script, exploded, to split up the </script> tags.

articleAd.innerHTML = <?php 
    $numItems = count($site_content_adverts); 
    $i = 0; 
    foreach ($site_content_adverts as &$value) { 
        if(++$i === $numItems) { 
            echo '"' . $value . '" + ';
        } else { 
            echo '"' . $value . '" + "pt>" + ';
        }
     }
?> "Advert";

On the loaded page, the above script looks like this (after the exploded string is echoed):

articleAd.innerHTML = "<style>.press-list-ad-1 { width: 320px; height: 50px; }@media(min-width: 500px) { .press-list-ad-1 { width: 468px; height: 60px; } }@media(min-width: 800px) { .press-list-ad-1 { width: 728px; height: 90px; } }</style><script async src=\"//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></scri" + "pt>" + "<!-- Press List Ad 1 --><ins class=\"adsbygoogle press-list-ad-1\"     style=\"display:inline-block\"     data-ad-client=\"ca-pub-1801533XXXXXXXX06\"     data-ad-slot=\"68XXXXXXXXX105\"></ins><scri" + "pt>" + "(adsbygoogle = window.adsbygoogle || []).push({});</scri" + "pt>" + "" +  "Advert";

This is the code that is rendered each time a new article loads:

<style>.press-list-ad-1 { width: 320px; height: 50px; }@media(min-width: 500px) { .press-list-ad-1 { width: 468px; height: 60px; } }@media(min-width: 800px) { .press-list-ad-1 { width: 728px; height: 90px; } }</style>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Press List Ad 1 -->
<ins class="adsbygoogle press-list-ad-1" style="display:inline-block" data-ad-client="ca-pub-1801XXXXX58006" data-ad-slot="6898XXXXXXX05"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Answer 1

It would appear that browsers will ignore script tags created with innerHTML(just search for innerHTML here to find the reference).

The proper way to insert scripts into the page is with document.createElement. Here is an example for your above code:

var articleAd = document.createElement("script");
articleAd.async = true;
articleAd.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
var articleIns = document.createElement("ins");
articleIns.dataset.adClient = "stuff goes here";   
articleIns.dataset.adSlot= "stuff goes here";
articleIns.className = "adsbygoogle press-list-ad-1";
var googlestuff = document.createElement("script");
googlestuff.text = "(adsbygoogle = window.adsbygoogle || []).push({});";
document.getElementsByTagName("body")[0].appendChild(articleIns);
document.getElementsByTagName("body")[0].appendChild(articleAd);
document.getElementsByTagName("body")[0].appendChild(googlestuff);

Note that I removed your ad id information as I don't believe it right to include such in this answer.