title: Accessing created DOM elements
body: <p>I have code to create another "row" (div with inputs) on a button click.  I am creating new input elements and everything works fine, however, I can't find a way to access these new elements.</p>
  
  <p>Example:  I have input element (name_1 below). Then I create another input element (name_2 below), by using the javascript's <code>createElement</code> function.</p>
  
  <pre><code>&lt;input type='text' id='name_1' name="name_1" /&gt;
  &lt;input type='text' id='name_2' name="name_2" /&gt;
  </code></pre>
  
  <p>Again, I create the element fine, but I want to be able to access the value of name_2 after it has been created and modified by the user.  Example: <code>document.getElementById('name_2');</code></p>
  
  <p>This doesn't work.  How do I make the DOM recognize the new element?  Is it possible?</p>
  
  <p>My code sample (utilizing jQuery):</p>
  
  <pre><code>function addName(){
  var parentDiv = document.createElement("div");
  $(parentDiv).attr( "id", "lp_" + id );
  
  var col1 = document.createElement("div");
  var input1 = $( 'input[name="lp_name_1"]').clone(true);
  $(input1).attr( "name", "lp_name_" + id );
  $(col1).attr( "class", "span-4" );
  $(col1).append( input1 );
  
  $(parentDiv).append( col1 );
  
  $('#main_div').append(parentDiv);
  }
  </code></pre>
  
  <p>I have used both jQuery and JavaScript selectors.  Example: <code>$('#lp_2').html()</code> returns null.  So does <code>document.getElementById('lp_2');</code></p>