title: Dynamically added javascript with external script doesn't get executed
body: <p>So this is our scenario... First thing we do is, we append a piece of javascript code which adds external script to document like this:</p>
  
  <pre><code>(function() {
       var e = document.createElement('script'); e.type = 'text/javascript'; e.async = true; e.src = 'http://blabla.com/script.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
  })();
  </code></pre>
  
  <p>Then in <code>script.js</code> following happens:</p>
  
  <pre><code>function ajaxCall() { 
      //... some script to send ajax request which calls createDiv() after success
     if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
     }
     else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4&amp;&amp;xmlhttp.status==200){
           createDiv(xmlhttp.responseText);
        }
     };
     xmlhttp.open("GET","http://blabla.com/api/");
     xmlhttp.send(); 
  }
  function parseResponse(response) {
      var parser = new DOMParser();
      var dom = parser.parseFromString(response, "text/html");
      return dom;
  }
  function createDiv(responsetext)
  {
     var dom = parseResponse(responsetext);
  
     var _ws = dom.getElementById('styles');
     var h = document.getElementsByTagName('head')[0];
     h.appendChild(document.importNode(_ws, true));
  
     var _jr = dom.getElementById('script1').outerHTML;
     var _vc = dom.getElementById('script2').outerHTML;
     var _rv = dom.getElementById('script3').outerHTML;
  
     var _rw = dom.getElementById('my_div');
     var _b = document.getElementsByTagName('body')[0];
     var _d = document.createElement('div'); _d.id = 'just_id';
     _d.innerHTML = _jr + _vc + _rv;
     _d.appendChild(document.importNode(_rw, true));
     _b.appendChild(_d);
  }
  ajaxCall();
  </code></pre>
  
  <p>Everything works fine, <strong>script's and a div are being appended as expected and where expected, but appended script doesn't get executed and doesn't affect appended div</strong>. Why is that? And how can I make it execute? We also don't get any warnings/errors in console. Using latest firefox.</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Comment: <em>The example script you showed just defines function, but it never actually calls them</em></p>
  
  <p>It actually calls a function which makes an ajax request, please check edited code snippet.</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Comment: <em>Have you tried to put the logic in a callback and then call it in createDiv? May be add some logs to test if its getting called but it unable to find div</em></p>
  
  <p>I just tried <code>console.log('hello world');</code> call in one of scripts which are being appended by <code>createDiv()</code> function, but it does nothing.</p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>For more details. When page is loaded, I can see </p>
  
  <pre><code>&lt;script type="text/javascript" id="script1" src="http://blabla.com/script1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" id="script2" src="http://blabla.com/script2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" id="script3" src="http://blabla.com/script3.js"&gt;&lt;/script&gt;
  &lt;div id="just_id"&gt;Content here&lt;/div&gt;
  </code></pre>
  
  <p>In DOM-Inspector and as mentioned above, there is <code>console.log('hello world');</code> to test it, but it doesnt get executed.</p>
  
  <p><strong>EDIT 4</strong></p>
  
  <p>Added some CSS through <code>createDiv()</code> function to document's <code>&lt;head&gt;&lt;/head&gt;</code> and it affects my div with id 'just_id'. JS still isn't working.</p>
  
  <p><strong>EDIT 5</strong></p>
  
  <p>Also tried to append inline javascript instead of external one in my function, but still no success. Can see following in DOM-Inspector, but code doesn't log anything.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     console.log('test');
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 6</strong></p>
  
  <p>I also tried to import nodes from as <a href="https://developer.mozilla.org/de/docs/Web/API/Node/appendChild" rel="nofollow noreferrer">suggested here</a></p>
  
  <blockquote>
    <p>This method is not allowed to move nodes between different documents. If you want to append node from a different document the document.importNode() method must be used.</p>
  </blockquote>
  
  <p>and also tried to changed order. 1.css 2.div 3.js like this but still no success... Anyone has an idea what is going on here?</p>
  
  <p><strong><em>Check the code above</em></strong></p>
  
  <p><strong>EDIT 7</strong></p>
  
  <p>As suggested in <a href="https://stackoverflow.com/questions/75943/how-do-you-execute-a-dynamically-loaded-javascript-block">How do you execute a dynamically loaded JavaScript block?</a> I set innerHTML of my div to scripts + content and then appended to DOM like this:</p>
  
  <p><strong><em>Check the code above</em></strong></p>
  
  <p>But still without any success.</p>
  
  <p><strong>EDIT 8</strong></p>
  
  <p>Added ajax function code. 3rd paramter in <code>xmlhttp.open("GET","http://blabla.com/api/");</code> true (asynchronous) and false (synchronous) already tried. Still no success.</p>
  
  <p><strong>EDIT 9</strong></p>
  
  <p>function <code>createDiv()</code> as suggested in answer: </p>
  
  <pre><code>var dom = parseResponse(responsetext);
  
  var _jr = dom.getElementById('script1'); //&lt;script&gt; tag with src attribute
  var _vc = dom.getElementById('script2'); //inline &lt;script&gt; for test purposes only, it should actualy be external script also
  var _rv = dom.getElementById('script3'); //inline &lt;script&gt;
  
  var _rw = dom.getElementById('external_div');
  var _b = document.getElementsByTagName('body')[0];
  var _d = document.createElement('div'); _d.id = 'internal_div';
  _d.appendChild(document.importNode(_rw, true));
  _d.appendChild(document.importNode(_jr, true));
  _d.appendChild(document.importNode(_rv, true)); //without second parameter TRUE, I dont get script content
  _d.appendChild(document.importNode(_vc, true)); //without second parameter TRUE, I dont get script content
  _b.appendChild(_d);
  </code></pre>
  
  <p>Doesn't work. Work's only if I take innerHTML of inline scripts from other document, create elements like suggested in answer, set their innerHTML and then append do current document. External script's wont load at all.</p>
  
  <p><strong>EDIT 10</strong></p>
  
  <p>.htaccess from localhost... :</p>
  
  <pre><code>&lt;Files *.html&gt;
      Order Deny,Allow
      Deny from all
      Allow from 127.0.0.1
  &lt;/Files&gt;
  
  &lt;Files *.php&gt;
      Order Deny,Allow
      Deny from all
      Allow from 127.0.0.1
  &lt;/Files&gt;
  
  &lt;Files index.php&gt;
      Order Allow,Deny
      Allow from all
  &lt;/Files&gt;
  
  &lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /page1/
  #RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule ^(.+)$ index.php?url=$1 [QSA,L]
  &lt;/IfModule&gt;
  </code></pre>
  
  <p>.htaccess from 192.*** ... :</p>
  
  <pre><code># BEGIN WordPress
  &lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /direktexpress/
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /page2/index.php [L]
  &lt;/IfModule&gt;
  # END WordPress
  </code></pre>
  
  <p><strong>EDIT 11</strong></p>
  
  <p>So I am probably going to give bounty @Drakes, just for the effort and his spent time on my question and going to show some screenshots what is going on. It is definitely firefox bug, I just tested on chrome and it works.</p>
  
  <p><strong>1st picture: source code of 192.168.2.197/testing/whatever/etc. .htaccess remains the same as in example above</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Z3GrP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z3GrP.png" alt="Source Code for 192.168.2.197"></a></p>
  
  <p><strong>2nd picture is source code for script.js, which is being loaded on 192.168.2.197/testing/whatever/etc. .htaccess remains the same as in example above:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/EXuss.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EXuss.png" alt="Script.js Source"></a> </p>
  
  <p><strong>3rd picture is a screenshot of inspector, how does my dom look like:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/tqPEL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tqPEL.png" alt="Dom"></a></p>
  
  <p><strong>4th picture.... nothing happens. Just a warning which has nothing to do with my problem (I hope so), because even when I remove all scripts, it still appears.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ZWzOc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZWzOc.png" alt="Console"></a></p>
  
  <p>Is it a firefox bug?</p>