When I need to make an AJAX request that injects a script node in either the head or body element, my code looks like this:
window.addEventListener("DOMContentLoaded", () => {
this._client.get('/getFragment', (responseText) => {
const obj = JSON.parse(responseText);
const scriptTag = document.createElement('template');
scriptTag.innerHTML = obj.fragment;
document.body.appendChild(scriptTag.content);
});
});
However, I've encountered an issue where even though the script is injected into the DOM, it doesn't seem to execute because the script itself calls another external URL. When I check the network monitor, I can see that the URL of the script is not being called or executed. How do I ensure that the script tag is actually executed after being injected into the DOM?
The fragment that needs to be injected is as follows:
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/1f.js");</script>