Run/Execute A </script> Tag Inserted On Page Using innerHTML DOM

As you know that innerHTML does not run scripts and here our problems start. So what’s the workaround to this problem. You can view the below-linked answer also that I think is related to my question but tried and not working with my problem. In short, our question is that do you want to run or execute an <script> element tag that contains javascript function or files inserted on a page using javascript innerhTML dom that by default will not able to be executed?

Its concept is clear. When you get the response data from PHP file then first extract <script ..... </script> tags from it and add them in index.html file hear by using createElement('script') and copy all the script to this then you can easily call your function after response data anywhere.

In other words, You can create an executing script element outside of that initial parse using the DOM method of calling createElement(‘script’), setting its src/content, and adding it to the document. The alternative is what jQuery’s getScript90 does.

There are many code snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. It Will Work On All Major Browsers.
2. Pure Vanilla JavaScript Code.
3. No External JQuery Or Script.
4. Small Snippet Code With Easy Understanding.
5. Will Run JavaScript Code As Well As Linked Files Too.

How To Run Or Execute A <script> Tag Inserted/Written On Page Using innerHTML DOM Using Pure JavaScript?

There are few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

<script type="text/javascript">
/* Run/Execute A <script> Tag Inserted On Page Using innerHTML DOM
--------------------------------------------------------------- */
var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach(oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach(attr => newScript.setAttribute(attr.name, attr.value));
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}
//--------------------------------------------------------------
// Example Data Where To Use And How
var tempData = "
Normal Text Content.
<script type="text/javascript">
    alert('OnLoadWorking');
    function hello() {
        alert('FunctionWorking');
    }
</script>
Normal Text Content.
";
// How To Call The Function
setInnerHTML(document.getElementById("whereToWrite"), tempData ); // does run <script> tags in HTML
hello();
</script>

Customizations:

You have to change this where you want to write your innerHTML content at document.getElementById("whereToWrite") and run all hello(); functions after this to call them to execute.

Final Words:

Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.