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

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

• javascript
• jquery
• html
• jquery-selectors

• I came across the same problem as you did in 2012. I have generated couple of html elements inside a loop and give them IDs like this id="element"+i, now I don't know how to access them? I tried the same way as you explained above in your question but that didn't work. What is the solution you adapt to get this thing worked? Thanks. – Superman Commented Jan 6, 2015 at 10:28

7 Answers 7

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

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

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/

Many ways you can create an element and give him an Id or Class, or use the DOM to access it..

$("html").prepend('<div id="foo"></div>');
$("#foo").doSomething();

another way

$("#automaticallyGeneratedId").find("div").doSomething();

To access the div in the element with the id:

$("#automaticallyGeneratedId div").whatever

If you cache the divs you could use something like:

var myDiv1Child = $('div', myDiv1);

Create a delegated listener and within the listener you can find the element by doing this

//If a div inside the parent is clicked then execute the function within
$('.PARENT_CLASS').click("div", function(){
//This variable holds all the elements within the div
var rows = document.querySelector('.PARENT_CLASS').getElementsByTagName('div');
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = function() {
        console.log(this);  //The element you wish to manipulate
    }
  }
});