title: How to Generate Breadcrumb Schema Dynamically using Javascript?
body: <p><strong>Below is the HTML actually used to display the breadcrumbs on each page</strong></p>
  <pre><code>            &lt;c:forEach items=&quot;${breadcrumbArray}&quot; var=&quot;breadcrumb&quot; varStatus=&quot;loopCounter&quot;&gt;
                  &lt;c:if test=&quot;${breadcrumb ne 'store'}&quot;&gt;
                      &lt;li class=&quot;breadcrumb__item&quot;&gt;
                          &lt;c:choose&gt;
                              &lt;c:when test=&quot;${not loopCounter.last}&quot;&gt;                                    
                                  &lt;a href=&quot;/${breadcrumb}&quot;&gt;${breadcrumb}&lt;/a&gt;                             
                              &lt;/c:when&gt;
                              &lt;c:otherwise&gt;
                                  ${fn:replace(breadcrumb, '-', ' ')}
                              &lt;/c:otherwise&gt;
                          &lt;/c:choose&gt;
                      &lt;/li&gt;
                  &lt;/c:if&gt;
              &lt;/c:forEach&gt;
  </code></pre>
  <p><strong>Javascript used to generate the schema dynamically</strong></p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function(){
         var el = document.createElement('script');
  
         el.type = 'application/ld+json';
         el.text = JSON.stringify({ &quot;@context&quot;: &quot;https://schema.org/&quot;,
                                    &quot;@type&quot;: &quot;BreadcrumbList&quot;,
                                    &quot;itemListElement&quot;: [{
                                        &quot;@type&quot;: &quot;ListItem&quot;,
                                        &quot;position&quot;: 1,
                                        &quot;name&quot;: &quot;&quot;,
                                        &quot;item&quot;: &quot;&quot;                                     
                                    }]
                               });
  
         document.querySelector('head').appendChild(el);
      });
  &lt;/script&gt;
  </code></pre>
  <p><strong>The schema for example for &quot; Home &gt; Our Mission &gt; Who We Are &quot; should be generated like:</strong></p>
  <pre><code>&lt;script type=&quot;application/ld+json&quot;&gt;
  {
      &quot;@context&quot;: &quot;https://schema.org/&quot;,
      &quot;@type&quot;: &quot;BreadcrumbList&quot;,
      &quot;itemListElement&quot;: [{
          &quot;@type&quot;: &quot;ListItem&quot;,
          &quot;position&quot;: 1,
          &quot;name&quot;: &quot;Home&quot;,
          &quot;item&quot;: &quot;https://corp.com/&quot;
          },{
          &quot;@type&quot;: &quot;ListItem&quot;,
          &quot;position&quot;: 2,
          &quot;name&quot;: &quot;Our Mission&quot;,
          &quot;item&quot;: &quot;https://corp.com/our-mission/&quot;
          },{
          &quot;@type&quot;: &quot;ListItem&quot;,
          &quot;position&quot;: 3,
          &quot;name&quot;: &quot;Who We Are&quot;,
          &quot;item&quot;: &quot;https://corp.com/our-mission/who-we-are&quot;
      }]
  }
  &lt;/script&gt;
  </code></pre>
  <p>The script is not getting appended to the 'head' tag ..</p>