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

By : brostbeef


Answers

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

By : brostbeef


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.

By : Athena


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.

By : Jim


This video can help you solving your question :)
By: admin