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 ``
Loading ...
`` 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, Jun 04 '12 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, Jun 04 '12 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, Jun 04 '12 at 16:58
I tried all of your advises. The script is linked, added correctly, but the 'alert('Testing')' function is not called. — ali, Jun 04 '12 at 16:58
Can you create a [jsfiddle](http://www.jsfiddle.net/) for your code ? — Jashwant, Jun 04 '12 at 17:07
Ali, take a look: [JSFiddle](http://jsfiddle.net/ult_combo/BQHu4/). 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é, Jun 04 '12 at 17:11

Dhiraj · Accepted Answer · 2012-06-04T17:07:07.947

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 04 '12 at 17:07

answered Jun 04 '12 at 16:51

Dhiraj

33,140
10
61
78

O.K. I appended the script to the div after appending the div to the body and it works now! – ali Jun 04 '12 at 17:11
But this is not the real cause/solution. In my code, I appended the script before appending it to `body`. – Jashwant Jun 04 '12 at 17:16

score 0 · Answer 2 · answered Jun 04 '12 at 17:06

<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.

JavaScript load script dynamically inside a DIV

2 Answers2

Linked