how to inject script into document <head> without jquery
<p>I am building a browser extension and I have a function inside of <code>&lt;script&gt;</code> tags that modifies the DOM that I need to inject into the <code>&lt;head&gt;</code> of any given webpage. The entire function is a string(<code>"&lt;script&gt;function content blah blah&lt;/script&gt;"</code>). I was using jquery to achieve this:</p>

<pre><code>$('head').prepend(modFunction);
</code></pre>

<p>and this works fine. I would like to remove jQuery for a few reasons but when I try to create a <code>&lt;script&gt;</code> element to inject into the <code>&lt;head&gt;</code> with vanilla javascript everything fails. I have tried two methods so far:</p>

<p>1.</p>

<pre><code>  var headSelector = document.querySelector('head');
  var el = document.createElement('div');
  el.innerHTML = modFunction;
  modFunction = el.firstChild;
  headSelector.insertBefore(modFunction, headSelector.firstChild);
</code></pre>

<p>2.<code>document.head.insertAdjacentHTML('afterbegin', modFunction);</code></p>

<p>Both javascript attempts inject a <code>&lt;script&gt;</code> tag with the correct function into the <code>&lt;head&gt;</code>, however, neither executes the function. Not sure why jQuery is working and the vanilla javascript doesn't. Any help would be greatly appreciated. Thanks</p>