Insert script to a div via innerHTML working but not loading
0
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>javascript
edited Jan 3 at 16:07
mplungjan
90k22127184
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
add a comment |
0
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>javascript
edited Jan 3 at 16:07
mplungjan
90k22127184
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
There is no innerText in an external script. Also innerHTML does not render scripts
– mplungjan
Jan 3 at 16:08
1
Possible duplicate of inject a script tag with remote src and wait for it to execute
– Chirag Ravindra
Jan 3 at 16:10
What you can do instead is to replace document.write with your own handler
– mplungjan
Jan 3 at 16:10
How do I do that document.write? Can you show me an example with fiddle?
– Rasel Ahmed
Jan 3 at 16:11
add a comment |
0
0
0
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>javascript
edited Jan 3 at 16:07
mplungjan
90k22127184
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
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>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>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>javascript
javascript
edited Jan 3 at 16:07
mplungjan
90k22127184
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
edited Jan 3 at 16:07
mplungjan
90k22127184
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
edited Jan 3 at 16:07
mplungjan
90k22127184
edited Jan 3 at 16:07
mplungjan
90k22127184
edited Jan 3 at 16:07
mplungjan
90k22127184
90k22127184
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
asked Jan 3 at 16:06
Rasel AhmedRasel Ahmed
1081618
1081618
There is no innerText in an external script. Also innerHTML does not render scripts
– mplungjan
Jan 3 at 16:08
1
Possible duplicate of inject a script tag with remote src and wait for it to execute
– Chirag Ravindra
Jan 3 at 16:10
What you can do instead is to replace document.write with your own handler
– mplungjan
Jan 3 at 16:10
How do I do that document.write? Can you show me an example with fiddle?
– Rasel Ahmed
Jan 3 at 16:11
add a comment |
There is no innerText in an external script. Also innerHTML does not render scripts
– mplungjan
Jan 3 at 16:08
1
Possible duplicate of inject a script tag with remote src and wait for it to execute
– Chirag Ravindra
Jan 3 at 16:10
What you can do instead is to replace document.write with your own handler
– mplungjan
Jan 3 at 16:10
How do I do that document.write? Can you show me an example with fiddle?
– Rasel Ahmed
Jan 3 at 16:11
There is no innerText in an external script. Also innerHTML does not render scripts
– mplungjan
Jan 3 at 16:08
There is no innerText in an external script. Also innerHTML does not render scripts
– mplungjan
Jan 3 at 16:08
1
1
Possible duplicate of inject a script tag with remote src and wait for it to execute
– Chirag Ravindra
Jan 3 at 16:10
Possible duplicate of inject a script tag with remote src and wait for it to execute
– Chirag Ravindra
Jan 3 at 16:10
What you can do instead is to replace document.write with your own handler
– mplungjan
Jan 3 at 16:10
What you can do instead is to replace document.write with your own handler
– mplungjan
Jan 3 at 16:10
How do I do that document.write? Can you show me an example with fiddle?
– Rasel Ahmed
Jan 3 at 16:11
How do I do that document.write? Can you show me an example with fiddle?
– Rasel Ahmed
Jan 3 at 16:11
add a comment |
2 Answers
2
active
oldest
votes
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 at 16:14
mplungjanmplungjan
90k22127184
add a comment |
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 at 16:29
Daniel BlackDaniel Black
265
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025887%2finsert-script-to-a-div-via-innerhtml-working-but-not-loading%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 at 16:14
mplungjanmplungjan
90k22127184
add a comment |
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 at 16:14
mplungjanmplungjan
90k22127184
add a comment |
2
2
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 at 16:14
mplungjanmplungjan
90k22127184
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>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>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 at 16:14
mplungjanmplungjan
90k22127184
answered Jan 3 at 16:14
mplungjanmplungjan
90k22127184
answered Jan 3 at 16:14
mplungjanmplungjan
90k22127184
answered Jan 3 at 16:14
mplungjanmplungjan
90k22127184
90k22127184
add a comment |
add a comment |
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 at 16:29
Daniel BlackDaniel Black
265
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
add a comment |
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 at 16:29
Daniel BlackDaniel Black
265
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
add a comment |
1
1
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 at 16:29
Daniel BlackDaniel Black
265
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>//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>//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 at 16:29
Daniel BlackDaniel Black
265
answered Jan 3 at 16:29
Daniel BlackDaniel Black
265
answered Jan 3 at 16:29
Daniel BlackDaniel Black
265
answered Jan 3 at 16:29
Daniel BlackDaniel Black
265
265
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
add a comment |
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
This, however will not insert the code produced by the script into a given div.
– mplungjan
Jan 3 at 16:31
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025887%2finsert-script-to-a-div-via-innerhtml-working-but-not-loading%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
There is no innerText in an external script. Also innerHTML does not render scripts
– mplungjan
Jan 3 at 16:08
1
Possible duplicate of inject a script tag with remote src and wait for it to execute
– Chirag Ravindra
Jan 3 at 16:10
What you can do instead is to replace document.write with your own handler
– mplungjan
Jan 3 at 16:10
How do I do that document.write? Can you show me an example with fiddle?
– Rasel Ahmed
Jan 3 at 16:11