title: Load an external HTML file within the current HTML file and fetch a javascript dependency for the newly created HTML
body: <p>This loads an external html file within an html file (example below running at <a href="http://jsbin.com/tuzidisomi/edit?html,output" rel="nofollow">http://jsbin.com/tuzidisomi/edit?html,output</a>):</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt; &lt;title&gt;inception script&lt;/title&gt;&lt;/head&gt;
    &lt;meta name="description" content="attempt to load an html file within an html file via an ajax request, and then load a script resource within the newly created html file."&gt;
    &lt;body&gt;
      &lt;div id='parent'&gt;&lt;/div&gt;
      &lt;script&gt;
        var parent = document.getElementById('parent');
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
            parent.innerHTML = xhr.responseText;
          }
        }
        xhr.open("GET", "http://159.203.88.58/child-123.html", true);
        xhr.setRequestHeader('Content-Type', 'text/html');
        xhr.send();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>That demonstrates that you can load a remote HTML file, but I also need the Javascript for that external html file. The following will load the external html file, but not grab the Javascript needed for the  external html file (example running at <a href="http://jsbin.com/pazayiyeca/edit?html,output" rel="nofollow">http://jsbin.com/pazayiyeca/edit?html,output</a>)</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt; &lt;title&gt;inception script&lt;/title&gt;&lt;/head&gt;
    &lt;meta name="description" content="attempt to load an html file within an html file via an ajax request, and then load a script resource within the newly created html file."&gt;
    &lt;body&gt;
      &lt;div id='parent'&gt;&lt;/div&gt;
      &lt;script&gt;
        var parent = document.getElementById('parent');
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
            parent.innerHTML = xhr.responseText;
          }
        }
        xhr.open("GET", "http://159.203.88.58/child-fail.html", true);
        xhr.setRequestHeader('Content-Type', 'text/html');
        xhr.send();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>child-fail.html looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt; &lt;title&gt;child html file&lt;/title&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;
        The html loads, but the script required never loads (see the network tab).
      &lt;/p&gt;
    &lt;script&gt;
      // load external script file
      var brainScript = document.createElement('script');
      brainScript.src = "https://cdnjs.cloudflare.com/ajax/libs/brain/0.6.3/brain.min.js";
      document.body.appendChild(brainScript);
    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>brain.js is fetched correctly if you load child-fail.html directly, so it's something about setting the innerHTML of an element that doesn't instruct the browser to fetch any <code>&lt;script&gt;</code> tags, I think.</p>
  
  <p>What is the recommended way for fetching Javascript for the remote HTML file and executing it as well?</p>