Accessing created DOM elements

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.

Answer 2

If it's properly added to the dom tree you will be able to query it with document.getElementById. However browser bugs may cause troubles, so use a JavaScript toolkit like jQuery that works around browser bugs.

Answer 3

var input1 = $( 'input[name="lp_name_1"]').clone(true);

The code you have posted does not indicate any element with that name attribute. Immediately before this part, you create an element with an id attribute that is similar, but you would use $("#lp_1") to select that, and even that will fail to work until you insert it into the document, which you do not do until afterwards.

Answer 4

var input1 = $( 'input[name="lp_name_1"]').clone(true);

should be

var input1 = $( 'input[@name="lp_name_1"]').clone(true);

Try that first, check that input1 actually returns something (maybe a debug statement of a sort), to make sure that's not the problem.

Edit: just been told that this is only true for older versions of JQuery, so please disregard my advice.

Answer 5

Thank you so much for your answers. After walking away and coming back to my code, I noticed that I had made a mistake. I had two functions which added the line in different ways. I was "100% sure" that I was calling the right one (the code example I posted), but alas, I was not.

For those also experiencing problems, I would say all the answers I received are a great start and I had used them for debugging, they will ensure the correctness of your code.

My code example was 100% correct for what I was needing, I just needed to call it. (Duh!)

Thanks again for all your help,

-Jamie