Load script tag as a string and append it to html header

Question

I want to load some script tag from the server as a string and to append it to HTML header, but even though I can append it, it doesn't execute. Here is the simplified HTML file to illustrate this situation:

<head>

</head>
<body>

    <script>
        function htmlStringToElement(htmlString) {
            var template = document.createElement('template');
            htmlString = htmlString.trim();
            template.innerHTML = htmlString;
            return template.content.firstChild;
        }

        //Mocking http request
        setTimeout(function() {
            var httpResponseMock = '<script>alert("HELLO FROM HTTP RESPONSE!");<\/script>'; 
            var script = htmlStringToElement(httpResponseMock);
            document.head.appendChild(script);
        }, 1000);
    </script>
</body>

I suppose that the reason is that header has already been rendered when the script is added dynamically but is there any other way to achieve this?

Does this answer your question? How do I include a JavaScript file in another JavaScript file? — ggorlen
– ggorlen, Commented Aug 6, 2020 at 5:43

user10249871 · Accepted Answer · 2018-12-06 08:21:52Z

3

With Jquery,

var httpResponseMock = '<script><\/script>'; 
$('head').append(httpResponseMock);

and with javascript

var httpResponseMock = '<script><\/script>'; 
document.getElementsByTagName('head')[0].appendChild(httpResponseMock);

answered Dec 6, 2018 at 8:21

user10249871

Sign up to request clarification or add additional context in comments.

1 Comment

Mladen Krstić Over a year ago

Well it works if it's done with jQuery as you did in a first example, but the second example without jQuery doesn't work. Anyway jQuery approach is very usefull! Thanks!

GottZ · Accepted Answer · 2018-12-06 08:31:45Z

3

don't ever use innerHTML unless you know what you are doing.
if you really want to dynamically inject script into the document just do this or use eval:

const script = document.createElement("script");
script.textContent = "console.log('yay it works!');";
document.head.appendChild(script);

the appendChild is running it.

answered Dec 6, 2018 at 8:31

GottZ

4,9771 gold badge39 silver badges48 bronze badges

1 Comment

Mladen Krstić Over a year ago

Thanks! This works well. I just added one additional step between because I receive whole script tag as a pure string, but your solution was the key thing to make this work. var httpResponseMock = '<script>alert("HELLO FROM HTTP RESPONSE!");<\/script>'; var parsedScriptFromHttpResponse = htmlStringToElement(httpResponseMock); const script = document.createElement("script"); script.textContent = parsedScriptFromHttpResponse.text; document.head.appendChild(script);

Sami Hult · Accepted Answer · 2018-12-06 08:24:04Z

0

There is a longer discussion in another question about dynamic loading of JS. The simple answer in this case is to use eval to evaluate the script content. Please note though that using eval is considered mostly a bad practice.

answered Dec 6, 2018 at 8:24

Sami Hult

3,0821 gold badge14 silver badges17 bronze badges

Collectives™ on Stack Overflow

Load script tag as a string and append it to html header

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related