JavaScript load script dynamically inside a DIV

0
votes

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!

2
javascriptdynamicinclude
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
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
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
I tried all of your advises. The script is linked, added correctly, but the 'alert('Testing')' function is not called. – ali
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é

2 Answers

1
votes

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

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