title: Proper way to execute JavaScript returned via AJAX (no jQuery)
body: <p>Say I get a response to a request for an AJAX load of data with a mix of JavaScript and HTML, e.g.:</p>
  
  <pre><code>&lt;script&gt;window.alert('Hello World!');&lt;/script&gt;
  &lt;p&gt;This is a paragraph. Lorem ipsum dolor sit amet...&lt;/p&gt;
  </code></pre>
  
  <p>If I just place that response into a <code>div</code> or other container, the script doesn't get executed automatically. I know this can be done via the <code>eval()</code> function (as noted in the example below), but <code>eval</code> is evil, so how can I do this properly? <strong>Note:</strong> I am not using jQuery.</p>
  
  <p>The following is an <em>example</em> of the AJAX loader:</p>
  
  <pre><code>function Load(id,url){
      var ajax=new XMLHttpRequest();
      ajax.onreadystatechange=function(){
          if(ajax.readyState!=4)return;
          var obj=document.getElementById(id);
          if(!obj)return;
          obj.innerHTML=ajax.responseText;
  
          // load any scripts
          var s=obj.getElementsByTagName('script');
          for(var i=0;i&lt;s.length;++i)window.eval(s[i].innerHTML); // &lt;-- bad
      }
      ajax.open("GET",url,true);
      ajax.send(null);
  }
  </code></pre>