How to insert and execute script tag to the DOM using plain js

Question

How to insert any string like <script>console.log('it works');</script> into browser DOM and see "it works" in browser console then?

jQuery's append function doing the thing: $('html').append('<script>console.log('it works'); but I am looking for light solution, ideally plain js

context: the string can be complex like <div><h1>Title</h1></div><div><script>console.log('it works');</script></div> - it should renders correct in the DOM and do all the JS staff

You have to create the <script> element explicitly. Inserting it via innerHTML will intentionally not work as defined by the spec. — zero298
– zero298, Commented Jul 17, 2019 at 15:40
Possible duplicate of script tag create with innerHTML of a div doesn't work — zero298
– zero298, Commented Jul 17, 2019 at 15:41

T.J. Crowder · Accepted Answer · 2019-07-17 15:48:01Z

9

You can use insertAdjacentHTML to insert the HTML, then go back and look for the scripts and copy the script src or text, and insert the copy into the DOM to run it:

// Sticking with broadly-supported features:
var htmlString = "<div><h1>Title</h1></div><div><script>console.log('it works');<\/script></div>";
var target = document.getElementById("target");
target.insertAdjacentHTML("beforeend", htmlString);
var scripts = target.getElementsByTagName("script");
while (scripts.length) {
    var script = scripts[0];
    script.parentNode.removeChild(script);
    var newScript = document.createElement("script");
    if (script.src) {
        newScript.src = script.src;
    } else if (script.textContent) {
        newScript.textContent = script.textContent;
    } else if (script.innerText) {
        newScript.innerText = script.innerText;
    }
    document.body.appendChild(newScript);
}

<div id="target"></div>

Note: Any inline document.write statements will not work as they would in the initial parse of a page; instead, they'll re-open the document and replace all of its content with whatever they write.

answered Jul 17, 2019 at 15:48

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Tom O. Over a year ago

Supplementary blog post regarding Element.insertAdjacentHTML method: hacks.mozilla.org/2011/11/…

Collectives™ on Stack Overflow

How to insert and execute script tag to the DOM using plain js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related