title: Append string to head using JavaScript and execute
body: <p>I have a JS script that I am using to append a string to the <code>head</code> tag, it works, but it doesn't execute what was appended.</p>
  
  <p><code>HTML</code> file:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          ...
          &lt;script src="test.js"&gt;&lt;/script&gt;
          ...
      &lt;/head&gt;
      &lt;body&gt;
          ...
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>File: <code>test.js</code></p>
  
  <pre><code>var str =
  `
  &lt;script ... &gt;&lt;/script&gt;
  &lt;link...&gt;
  other stuff...
  `
  
  var html = document.getElementsByTagName('head')[0].innerHTML;
  document.getElementsByTagName('head')[0].innerHTML=str+html;
  </code></pre>
  
  <p>With this, I understand that it would go into recursion if all of <code>head</code> was executed again just to execute the appended string (unless there is a way to execute <em>only</em> the appended string), but I have a way to deal with this. First, I need it to actually execute.</p>
  
  <p>I have seen other similar questions, but they ask about appending a single <code>script</code> tag or something similar, I'm looking to add a whole chunk of <code>HTML</code> and have the browser execute it.</p>
  
  <p>I'm looking for a pure JavaScript solution.</p>
  
  <p>Note that <code>str</code> contains things like <code>JQuery</code> and <code>Bootstrap</code> and therefore the rest of the document heavily depends on this append &amp; execution happening first.</p>