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

Question

I have written a script which I have in the head section on my landing pages. What it does is that it loads a facebook pixel which I have stored in another part of my application which I access by calling an endpoint. This because I need to dynamically change the script without interfering with the code on the landing page itself. This code is written in Jquery but now I need jQuery gone from my application so I've tried to rewrite it using only vanilla javascript.

The problem is that it works just fine with the jQuery code, but when I've tried to replace it with vanilla Javascript it does not seem to inject the code in the correct way. The output in the DOM looks exactly the same but it does not fire the pixel somehow.

So my question is. Why is this?

Here is the working example of my jQuery script

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

Here is my vanilla Javascript version

<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

I think the issue is with insertAdjacentHTML - just a guess, but maybe it only works for HTML (divs, images, etc.) rather than scripts. Hopefully this workaround is an acceptable solution:

 (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; } })();