如何使用JavaScript在document head的指定元素后插入新节点

appendChild() 方法的原生逻辑是将传入元素作为调用节点的最后一个子节点插入，因此你现在的代码会把style元素放到noscript标签内部，和预期效果不符。

使用DOM原生的insertBefore()方法，配合目标节点的nextSibling属性，即可实现插入到目标节点正下方的效果，修改后的函数如下：

function insertAtElement(element) {
  var target = document.getElementById("inject-theme-styles-here");
  // 插入到目标节点的下一个兄弟节点之前，等价于插入到目标节点正后方
  target.parentNode.insertBefore(element, target.nextSibling);
}

该写法兼容所有主流浏览器，即使目标节点是父节点的最后一个子节点，target.nextSibling会返回null，insertBefore传入null时会自动将元素插入到父节点末尾，不会出现报错。

如果你的注入逻辑是通过style-loader实现的，可以直接在webpack配置中指定插入规则，无需单独封装工具函数：

// webpack.config.js 相关配置示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: (element) => {
                const target = document.getElementById('inject-theme-styles-here');
                target.parentNode.insertBefore(element, target.nextSibling);
              }
            }
          },
          'css-loader'
        ]
      }
    ]
  }
}

内容的提问来源于stack exchange，提问作者Chris