当在dom中注入Facebook像素时，jQuery附加到香草JavaScript问题

Question

我已经编写了一个脚本，该脚本已在着陆页的开头部分显示。 它的作用是加载一个我存储在应用程序另一部分中的facebook像素，我可以通过调用端点来访问它。 这是因为我需要动态更改脚本，而不会干扰登录页面本身上的代码。 这段代码是用Jquery编写的，但是现在我需要从我的应用程序中删除jQuery，所以我尝试仅使用原始javascript重写它。

问题在于它可以与jQuery代码一起正常工作，但是当我尝试用香草Javascript替换它时，似乎并没有以正确的方式注入代码。 DOM中的输出看起来完全相同，但不会以某种方式触发像素。

所以我的问题是。 为什么是这样？

这是我的jQuery脚本的工作示例

<script>
  $.get('https://api.mydomain.com/script', function (data) {
    $('head').append(data);
  });
</script>

这是我的原始Javascript版本

<script>
  var theUrl = 'https://api.mydomain.com/script';
  let xhr = new XMLHttpRequest();
  xhr.open("GET", theUrl);
  xhr.send();
  xhr.onload = function() {
    document.querySelector("head").insertAdjacentHTML("beforeend", xhr.response);
  };
</script>

Answer 1

我认为问题在于insertAdjacentHTML只是一个猜测，但也许它仅适用于HTML（div，图像等），而不适用于脚本。 希望这种解决方法是可以接受的解决方案：

 (function() { const exampleScript = getScriptContent(` <script> alert("example script loaded"); <\\/script> `), s = document.createElement("script"), t = document.createTextNode(exampleScript); s.appendChild(t); document.getElementsByTagName("head")[0].appendChild(s); function getScriptContent(htmlStr) { const tempDiv = document.createElement("div"); tempDiv.innerHTML = htmlStr; return tempDiv.innerText; } })();