title: JS controls on loaded html document
body: <p>I am just learning javascript, so I really don't know what I'm doing very much.  At work, we have several intranet websites that we go to to look up information.  I am trying to write something that can expedite this process.  I'm stuck on the very first site, just trying to get it to log in.  I loaded the website in Chrome, and using JQuery commands, I was able to put the username and password in and click the login button programatically.  I am using the following code to load the page...</p>
  
  <pre><code>let Hash = 'abc';
  let Pass = '123'
  let ATSweb = 'https://website.aspx'
  let wHeight = window.outerHeight;
  
  function load_home() {
     document.getElementById("main").innerHTML = '&lt;object type="text/html" height =' + wHeight + ' width = "100%" id="ATS" data=' + ATSweb + '&gt;&lt;/object&gt;';
     $('input#_ctl0__ctl0_FullPageBody_MainColumn_UsernameTextbox').value = Hash;
  }
  
  load_home();
  </code></pre>
  
  <p>That JQuery command worked in the original page in the developer console in Chrome, but when it's loaded with this code, it doesn't work.  In the developer console, if I drill down to the page the code is loading, and then I execute the command, it will put the Hash variable into the control.</p>
  
  <p>I am guessing that there is some way of referencing the document that is being imported that I am not aware of.  Any help would be greatly appreciated.  Here is my HTML.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;script type="text/javascript" src="js/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;main id="main" height = '100%' width = '100%'&gt;
      &lt;/main&gt;
      &lt;script src="index.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>