Accessing elements inside dynamically created divs with HTML/Javascript

html, javascript, jquery, jquery-selectors

Solution

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]')`.

Problem

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

Original source