title: How can I append an element after another in the document head?
body: <p>I need to inject style elements into the head section of my html using JavaScript. For some context I am using webpack to inject styles. I have a function that is supposed to inject styles at an id inside of my head tags.</p>
  <p>This is what my html looks like:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function insertAtElement(element) {
    var target = document.getElementById(
      "inject-theme-styles-here"
    );
    target.appendChild(element);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;Webpack tutorial&lt;/title&gt;
    &lt;noscript id="inject-theme-styles-here"&gt;&lt;/noscript&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am not getting my desired output. In the element tab in chrome it adds it inside the  tag. But I need it to be added right below it not inside of it.</p>