title: DOM loading and referencing elements from Javascript function
body: <p>Dealing with some legacy code atm and I have an extremely annoying issue with <code>Javascript</code> and Internet Explorer.</p>
  
  <p>The setup of the GUI consist of several lines of HTML printed with document.write() (from a .js file) and some work inside Javascript functions. </p>
  
  <p>In the Javascript functions, the DOM does not seem to be loaded fully, because simple statements like <code>this.domInputObj.setAttribute(a,b)</code> yield an error of <code>setAttribute</code> called on a invalid element.</p>
  
  <h2>A.js</h2>
  
  <pre><code>//Some where in the beginning we print an input field with document.write
  document.write('&lt;input ...');
  ...
  new SomeObject(document.forms[formA].inputFieldA)
  </code></pre>
  
  <h2>B.js</h2>
  
  <pre><code>function SomeObject(inputFieldObj) {
      // the text input field
      this.inputObjFieldObj = inputFieldObj;
      this.inputFieldObj.setAttribute('a','b') //e.g. yields error in IE
  }
  </code></pre>
  
  <p>My question regards how this can happen in IE only? I thought it was something with the loading order of the .js files (it might still be) and that other browsers are 'smarter'?</p>
  
  <p>If I debug then the <code>document.write</code> happen before the Javascript calls, but is it buffered somehow? </p>
  
  <p>Many thanks for any ideas.</p>
  
  <h1>Edit</h1>
  
  <p>Clarified B.js. Also the alphabetical naming does not imply loading order. </p>