Accessing elements inside dynamically created divs with HTML/Javascript

Question

I'm quite new to javascript and JQuery programming. Usually, to access elements I give them an id, so I can get them like $("#"+id).blabla().

But now I need to dynamically create a div, and access elements inside it.

Something like

<div id="automaticallyGeneratedId">
   <div ???></div> <!-- first div -->
   <div ???></div> <!-- second div -->
</div>

What are the best practices to access and identify each of the inner divs? I generate another id for them? Or what?

I don't have the theory of selectors fully clear.

edit: modified the question from identifying a single inner div to identifying divs amongs many of them

Solution 1

You can maintain a pattern when you're generating id. For example:

if you always generate id like: myid1, myid2,myid3...

<div id="myid1">
   <div></div>
</div>

<div id="myid2">
   <div></div>
</div>

......

then you can try:

$('div[id^=myid]').find('div').foo();

OR

$('div[id^=myid] div').foo();

Here, ^= is start with selector, so div[id^=myid] will select div whose id start with myid.

You can also use Contain word selector which is ~= and use like $('div[id~=myid]'). This will select div with id contains word myid.

Instead of id if you want to use other attribute eg. name then change selector like:

$('div[name^=myid]') or $('div[name~=myid]').

Solution 2

It's usually a good practice that if you already have a reference to that outer div to just search from there using find.

You can give it an id, or if you want to use a more general approach you can use classes.

<div class="subdiv">...


$('#automaticallyGeneratedId').find('div.subdiv')

Solution 3

Usually, when you create them, you can assign event handlers and the likes straight on them. Like this:

var div = $( '<div></div>' );
div.on( 'click', function() {
    // Do something when the generated div is clicked
});

// Then, add it to the DOM
$( 'body' ).append( div );

You don't need to bother selecting them with ID or classes, they're already available in your code.

Another way is to use event bubbling to handle newly created elements of the same class. A good link about this is this one: http://beneverard.co.uk/blog/understanding-event-delegation/