JavaScript load script dynamically inside a DIV

Question

I have created a DIV dynamically and I want it to contain a JavaScript link, that will output something on it. The JavaScript link source is absolute. Obviously, this doesn't work:

var div = document.createElement('div');
    div.id = 'mydiv';
    div.innerHTML = "<script type='text/javascript' " + 
                    "src='http://mydomain.com/myscript.js'></script>";
    document.body.appendChild(div);

so I tried this one

var script = document.createElement('script')
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'http://mydomain.com/myscript.js');

var div = document.createElement('div');
    div.id = 'mydiv';

    div.appendChild(script);
    document.body.appendChild(div);

In my script file I have a simple alert('Testing...'); code. The problem is that it doesn't work. The script inclusion is typed inside the div (I see it when I inspect the DIV in Chrome), but it doesn't work. I don't see the 'Testing...' message. What am I missing or doing wrong? Thanks!

Have you tried document.getElementById('id-of-your-div').innerHTML('Loading...')? Also, you could just have the div be <div id='some-id'>Loading ...</div> to start with and then the script can write to its innerHTML. The script need not be contained within the div, and in fact, shouldn't because you might overwrite it depending on what you're doing to the contents of your div. — Kasapo
– Kasapo, Commented Jun 4, 2012 at 16:52
Try putting "alert('testing')" in your JS instead. If you do document.write on a blank page, you SHOULD see the output, but depending on the markup, the text might not be visible even if it is in fact written. The way you're trying to attach javascript should work fine. — Kasapo
– Kasapo, Commented Jun 4, 2012 at 16:55
You're not going to be able to do a document.write without blowing your whole page away, even if you do get the script to run, if you're doing this stuff after the DOM is built. You should generally avoid document.write anyway; manipulating the DOM directly would make much more sense. — Pointy
– Pointy, Commented Jun 4, 2012 at 16:58
I tried all of your advises. The script is linked, added correctly, but the 'alert('Testing')' function is not called. — ali
– ali, Commented Jun 4, 2012 at 16:58
Ali, take a look: JSFiddle. Obviously, I swapped the src attribute by an innerHTML as I wouldn't host a JS just for an alert, try adapting it and make sure your script's source is right. — Fabrício Matté
– Fabrício Matté, Commented Jun 4, 2012 at 17:11

Dhiraj · Accepted Answer · 2012-06-04 17:07:07Z

1

The way i understand it, your code does not wait till the DOM is ready.

It is advised to use jquery's ready which will ensure that the script passed to it runs only after the DOM is ready

Hope this helps

edited Jun 4, 2012 at 17:07

answered Jun 4, 2012 at 16:51

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

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

2 Comments

ali Over a year ago

O.K. I appended the script to the div after appending the div to the body and it works now!

Jashwant Over a year ago

But this is not the real cause/solution. In my code, I appended the script before appending it to body.

Jashwant · Accepted Answer · 2012-06-04 17:06:36Z

0

<html>
<head>  
</head> 
<body>  
<script type='text/javascript'> 
    var script = document.createElement('script')
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'my.js');

    var div = document.createElement('div');
    div.id = 'mydiv';

    div.appendChild(script);
    document.body.appendChild(div); 
</script> 
</body>
</html>

This code works for me, But yes, document.write() does not work for me.

answered Jun 4, 2012 at 17:06

Jashwant

29.1k16 gold badges76 silver badges110 bronze badges

Collectives™ on Stack Overflow

JavaScript load script dynamically inside a DIV

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related