Does Schema.org markup work if markup is dynamically built with JavaScript?

Question

I have a page where some events are dynamically loaded by reading some JSON with JavaScript. I build a div for every event with the Event Schema.org markup.

Google's testing tool doesn't read this markup. Is it because of an error in the markup, or is it because of the dynamic loading?

The HTML code of one Event is:

<div class="evento well" itemscope itemtype="http://schema.org/Event">
   <meta itemprop="startDate" content="2015-03-20T20:00:00.000Z">
   <meta itemprop="endDate" content="2015-01-21T20:00:00.000Z">
   <div class="dataEvento">
      <div class="dayWeekEvento">venerdì</div>
      <div class="dayNumEvento">20</div>
      <div class="monthEvento">Marzo</div>
   </div>
   <div class="datiEvento">
      <div class="oraEvento">ore 21:00</div>
      <div class="titoloEvento"><span itemprop="name">Titolo evento</span></div>
      <div class="luogoEvento" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"><a href="https://www.google.it/maps/place/Milano" target="_blank"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> <span itemprop="addressLocality">Milano</span></a></div>
   </div>
</div>

Answer 1

If you're having trouble validating schema markup with the Google testing tool, you can create the json-ld snippet with JS, which also allows you to manipulate the data if needed like:

<script> 
    (function(){
       var data = {
            "@context": "http://www.schema.org",
            ...
        }
        var script = document.createElement('script');
        script.type = "application/ld+json";
        script.innerHTML = JSON.stringify(data);
        document.getElementsByTagName('head')[0].appendChild(script); 
    })(document);
</script>