CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
cdarwin
cdarwin

Reputation: 4291

Accessing elements inside dynamically created divs with HTML/Javascript

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

Upvotes: 3

Views: 12660

Answers (7)

Ken Mumo
Ken Mumo

Reputation: 1

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

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 6

Perpetual Infinity
Perpetual Infinity

Reputation: 36

If you cache the divs you could use something like:

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

Upvotes: 0

Florian Margaine
Florian Margaine

Reputation: 60717

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/

Upvotes: 1

Marco de Wit
Marco de Wit

Reputation: 2804

To access the div in the element with the id:

$("#automaticallyGeneratedId div").whatever

Upvotes: 0

user1475195
user1475195

Reputation: 59

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

Upvotes: 0

ChrisThompson
ChrisThompson

Reputation: 2008

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

Upvotes: 2

Related Questions