title: JS Appended script tag executing
body: <p>I am trying to dynamically add a Google Analytics tag to a webpage. Initially I was using jQuery to do this and it worked fine. This is what my js using jQuery:</p>
  
  <pre><code>(function() {
  if (typeof window.jQuery !== 'undefined' &amp;&amp; typeof window.$ !== 'undefined') {
      var gtmHeadCode = "&lt;!-- Google Tag Manager --&gt;" +
          "&lt;script&gt;(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':" +
          "new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0]," +
          "j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=" +
          "'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);" +
          "})(window,document,'script','dataLayer','GTM-XXXXXXX');&lt;/script&gt;" +
          "&lt;!-- End Google Tag Manager --&gt;";
  
      var gtmBodyCode = "&lt;!-- Google Tag Manager (noscript) --&gt;" +
          "&lt;noscript&gt;&lt;iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXX'" +
          "height='0' width='0' style='display:none;visibility:hidden'&gt;&lt;/iframe&gt;&lt;/noscript&gt;" +
          "&lt;!-- End Google Tag Manager (noscript) --&gt;";
  
      if (jQuery('script[src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"]').length === 0) {
          jQuery('head').prepend(gtmHeadCode);
          jQuery('body').prepend(gtmBodyCode);
      }
  }
  }());
  </code></pre>
  
  <p>This worked perfectly. The gtmHeadCode would append the script tag and execute the js inside adding the other header tags for google tag manager that were necessary. </p>
  
  <p>I decided to move away from this as some of the sites did not have jQuery and moved to a pure js approach which looked something like this:
       (window.addEventListener('load', function() {</p>
  
  <pre><code>    var gtmHeadCode = "&lt;!-- Google Tag Manager --&gt;" +
          "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':" +
          "new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0]," +
          "j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=" +
          "'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);" +
          "})(window,document,'script','dataLayer','GTM-XXXXXXX');" +
          "&lt;!-- End Google Tag Manager --&gt;";
  
      var gtmBodyCode = "&lt;!-- Google Tag Manager (noscript) --&gt;" +
          "&lt;iframe src='https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX'" +
          "height='0' width='0' style='display:none;visibility:hidden'&gt;&lt;/iframe&gt;" +
          "&lt;!-- End Google Tag Manager (noscript) --&gt;";
  
  if (document.querySelectorAll('[src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"]').length == 0) {
      var headTag = document.createElement('script');
      var bodyTag = document.createElement('noscript');
      headTag.setAttribute('type', 'text/javascript'); 
  
      headTag.innerHTML += gtmHeadCode;
      bodyTag.innerHTML += gtmBodyCode;
      document.head.insertBefore(headTag, document.head.firstChild);
      document.body.insertBefore(bodyTag, document.body.firstChild);
  }
  })); 
  </code></pre>
  
  <p>The problem I'm having here is the original <code>script</code> tag appends to the DOM head but the js does not seem to run? Why when appended with the jQuery prepend it worked fine but does not with the <code>insertBefore</code> in JS?</p>