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
– mplungjan, Commented Jan 3, 2019 at 16:08
Possible duplicate of inject a script tag with remote src and wait for it to execute — Chirag Ravindra
– Chirag Ravindra, Commented Jan 3, 2019 at 16:10
What you can do instead is to replace document.write with your own handler — mplungjan
– mplungjan, Commented Jan 3, 2019 at 16:10
How do I do that document.write? Can you show me an example with fiddle? — Rasel Ahmed
– Rasel Ahmed, Commented Jan 3, 2019 at 16:11

mplungjan · Accepted Answer · 2019-01-03 16:14:02Z

2

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>

answered Jan 3, 2019 at 16:14

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Daniel Black · Accepted Answer · 2019-01-03 16:29:16Z

1

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>

answered Jan 3, 2019 at 16:29

Daniel Black

6299 silver badges18 bronze badges

1 Comment

mplungjan Over a year ago

This, however will not insert the code produced by the script into a given div.

Collectives™ on Stack Overflow

Insert script to a div via innerHTML working but not loading

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related