title: Appending to dynamically created divs using Javascript and mootools
body: <p>Using mootools I have a 'builder' class that manufactures form objects, dynamically creating divs as it does so.
  Some of the form objects are made up of several different objects. For example, a selection object features a textbox which filters the contents of the selector and a button to save the selection.</p>
  
  <p>In this case I want the filter box and button to be located in a div which is appended to the div of the overall form object so as to have a 'wrapper'.</p>
  
  <p>However, I'm having a problem appending to the div of the dynamically created form object.</p>
  
  <p>After the dom is loaded, the 'builder' class is called:</p>
  
  <pre><code>window.addEvent('domready', function()
  {
  builder = new Build();
  });         
  </code></pre>
  
  <p>Builder creates a new div as such</p>
  
  <pre><code>var div = document.createElement('div');
  var div_id = 'the_div_id_for_my_form_object';
  
  div.setAttribute('id', div_id);
  </code></pre>
  
  <p>It then creates the form object which takes in the div as one of its parameters</p>
  
  <pre><code>var form_obj = superSelector(div);
  </code></pre>
  
  <p>Inside the form_obj constructor, this div is saved as a member variable, this.div = div. 
  The filter textbox is created as well as the button.</p>
  
  <p>Here is where I'm seeing a problem. (since the issue is the same for both the filter textbox and the button, I'll describe only the textbox case)</p>
  
  <p>The div of form_obj is passed to the constructor of the filter textbox.
  When the filter textbox is created, it creates a div for itself</p>
  
  <pre><code> var div = document.createElement('div');
   var div_id = 'the_div_id_for_my_filter_box';
  </code></pre>
  
  <p>When I attempt to append this div to the div of form_obj, I get a js error saying that I am attempting to append to 'null'</p>
  
  <pre><code> var filterBox = new Class({
   initialize: function(name, form_obj)
   { 
     this.name = name;
  
     this.div = document.createElement('div');
     this.div.setAttribute('id', name);
  
     document.getElementById(form_obj.div).appendChild(this.div);
    }
  </code></pre>
  
  <p>Yields:</p>
  
  <blockquote>
    <p>"Uncaught TypeError: Cannot call method 'appendChild' of null"</p>
  </blockquote>
  
  <p>I'm not sure how to get around this. I get the sense that the div I want to append to doesn't exist at the time I try to append to it. However I see no way of generating an event which tells me when it does exist so that I can postpone the construction of any 'child' divs until that point</p>