CODEWITHSUNDEEP
javascriptjqueryhtmldom
brostbeef
brostbeef

Reputation: 366

Accessing created DOM elements

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

Upvotes: 2

Views: 5170

Answers (5)

brostbeef
brostbeef

Reputation: 366

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

Upvotes: 0

Athena
Athena

Reputation: 3198

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.

Upvotes: 0

Jim
Jim

Reputation: 73966

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.

Upvotes: 0

Armin Ronacher
Armin Ronacher

Reputation: 32563

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.

Upvotes: 0

17 of 26
17 of 26

Reputation: 27382

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.

Upvotes: 2

Related Questions