Question

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.

Example: I have input element (name_1 below). Then I create another input element (name_2 below), by using the javascript’s createElement function.

<input type='text' id='name_1' name='name_1' /> <input type='text' id='name_2' name='name_2' /> 

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: document.getElementById('name_2');

This doesn’t work. How do I make the DOM recognize the new element? Is it possible?

My code sample (utilizing jQuery):

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); } 

I have used both jQuery and JavaScript selectors. Example: $('#lp_2').html() returns null. So does document.getElementById('lp_2');

Answer 1

You have to create the element AND add it to the DOM using functions such as appendChild. See here for details.

My guess is that you called createElement() but never added it to your DOM hierarchy.