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

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
– Superman, Commented Jan 6, 2015 at 10:28

thecodeparadox · Accepted Answer · 2012-07-18 18:38:00Z

6

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

edited Jul 18, 2012 at 18:38

answered Jul 18, 2012 at 18:09

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cdarwin Over a year ago

your answer is interesting, but the question is slightly different: I need to assign "names" (ids?) and access a number of elements inside an outer div. Being inspired by your question, I think I could generate subids like div1, div1-1, div 1-2

thecodeparadox Over a year ago

@cdarwin that means, instead of id you need name attribute to container (outer) div? e.g <div name="dynamicid"></div> instead of <div id="dynamicid"></div>

cdarwin Over a year ago

it's not important assigning name or id to the outer div, what I meant is that I was interested in accessing the inner divs and not the outer one. I always used only "$(id)", but I see that find accepts the same selectors as $ does, so I understand that I can use your suggestion in the find part too, like $(...).find('div[id]'), right?

ChrisThompson · Accepted Answer · 2012-07-18 18:07:16Z

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

answered Jul 18, 2012 at 18:07

ChrisThompson

2,00813 silver badges17 bronze badges

Comments

Florian Margaine · Accepted Answer · 2012-07-18 18:18:57Z

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/

I know, but what if later I need accessing a subdiv of that div? The question is about that

user1475195 · Accepted Answer · 2012-07-18 18:08:51Z

0

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

answered Jul 18, 2012 at 18:08

user1475195

591 gold badge1 silver badge6 bronze badges

Comments

Marco de Wit · Accepted Answer · 2012-07-18 18:12:35Z

0

To access the div in the element with the id:

$("#automaticallyGeneratedId div").whatever

answered Jul 18, 2012 at 18:12

Marco de Wit

2,8362 gold badges20 silver badges23 bronze badges

1 Comment

cdarwin Over a year ago

I can have many divs inside the outer div, so I need an exact way to identify them

Perpetual Infinity · Accepted Answer · 2012-07-18 18:20:48Z

0

If you cache the divs you could use something like:

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

answered Jul 18, 2012 at 18:20

Perpetual Infinity

362 bronze badges

Comments

Ken Mumo · Accepted Answer · 2017-06-02 11:52:52Z

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

Collectives™ on Stack Overflow

Accessing elements inside dynamically created divs with HTML/Javascript

7 Answers 7

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Related