Insert script to a div via innerHTML working but not loading

Question

I am inserting a script tag on a div by javascript.

The script is loading on div but it is not loading. I am assuming something going wrong on eval. Can you check why it is not working?

var mydiv = document.getElementById("mydiv");
var content = "<script src='https://gist.github.com/raselahmed7/e233c308d5bf354c9d174f80a30c6b6a.js'><\/script>";

mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
  eval(scripts[i].innerText);
}

<div id="mydiv"></div>

There is no innerText in an external script. Also innerHTML does not render scripts — mplungjan, Jan 03 '19 at 16:08
Possible duplicate of [inject a script tag with remote src and wait for it to execute](https://stackoverflow.com/questions/8578617/inject-a-script-tag-with-remote-src-and-wait-for-it-to-execute) — Chirag Ravindra, Jan 03 '19 at 16:10
What you can do instead is to replace document.write with your own handler — mplungjan, Jan 03 '19 at 16:10
How do I do that document.write? Can you show me an example with fiddle? — Rasel Ahmed, Jan 03 '19 at 16:11

score 2 · Accepted Answer · answered Jan 03 '19 at 16:14

There is no innerText in an external script. Also innerHTML does not render scripts

You likely want to do this:

var myDiv = document.getElementById("mydiv");
var oldWrite = document.write, html=[];
document.write = function(str) {
  html.push(str);
}
var script = document.createElement("script");
script.src="https://gist.github.com/raselahmed7/e233c308d5bf354c9d174f80a30c6b6a.js"
document.getElementsByTagName("head")[0].appendChild(script)
setTimeout(function() { myDiv.innerHTML=html.join("\n") },1000)

<div id="mydiv"></div>

score 1 · Answer 2 · answered Jan 03 '19 at 16:29

The below code should give you an idea on how this can be accomplished:

//attach click event listeners
document.getElementById("loadButton").addEventListener("click", loadScript);
document.getElementById("testButton").addEventListener("click", testScript);

//this function should only work after the script has been loaded
function testScript(){
 $('#title').text('Used the loaded script!');
}

//this function will append the created script element to the head
function loadScript() {
  var script = document.createElement('script');

  script.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js');

  document.head.appendChild(script);
}

<html>

  <head>
    <title>
      Testing Dynamic Scripts
    </title>
  </head>

  <body>
    <h1 id="title">
      Testing Dynamic Scripts
    </h1>
    <div>
      <input id="loadButton" type="button" value="Load Script" />
      <input id="testButton" type="button" value="Test Script" />
    </div>
  </body>

</html>

This, however will not insert the code produced by the script into a given div. — mplungjan, Jan 03 '19 at 16:31

Insert script to a div via innerHTML working but not loading

2 Answers2