CODEWITHSUNDEEP
javascriptjquerydom
J. Doe
J. Doe

Reputation: 915

Where are dynamically created elements stored and how to access them? jQuery

I never really understood what's happening behind the behavior of dynamically created elements. Here's an example:

$('.some-list').append('<div class="node"></div>');

Where is that stored now? How can I access the div element $('.node')?

I know jQuerys 'on' method for events, but how do I simply access and manipulate that element? Thanks.

Upvotes: 1

Views: 75

Answers (3)

David Thomas
David Thomas

Reputation: 253486

Whether $('.some-list') is itself present in the document, or not, you could simply use:

$('.some-list')
  // append returns the original collection ("$('.some-ist')"),
  // not the newly-added element(s)
  .append('<div class="node"></div>')
  // so here we can use "find('.node')" to find the newly added
  // element(s):
  .find('.node')

In the event of the $('.some-list') being present in the document already:

$('.some-list').append('<div class="node">The newly-added Element</div>').find('.node').css('color', '#f90');
.some-list div {
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="some-list">
  <div>Existing node</div>
</div>

In the event of the $('.node') element not being present in the document:

var someList = $('<div />', {
    'class': 'some-list',
    'html': '<div>Existing element</div>'
  }),
  newNode = someList.append('<div class="node">The newly-added Element</div>').find('.node');

console.log(newNode);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

References:

Upvotes: 2

Akshay Khandelwal
Akshay Khandelwal

Reputation: 1570

So lets analyse what would happen behind the scenes here. First we need to understand the HTML that'd look something like below.

<html>
    <head>
        <!-- Some code here -->
    </head>
    <body>
        <!-- Some Code here -->
        <div class="some-list"></div> <!-- Assuming it to be div as that's the most generic way I'd explain, but it could be any element for that matter -->
        <!-- Some Code here -->
    </body>
</html>

Notice that when you write the $('.some-list'), JQuery will select the div with class=some-list and then you append a random string inside that by .append('<div class="node"></div>'); now when you use JQuery's append, it'll try to see if the passed data (in this case a string) is an object or not. if object it internally does element.appendChild else it internally does element.innerHTML=string.

Now to access the element you write $('.node') as it means you are trying to get the elements from the dom with class names as node. Since you do this after .append it becomes available in the DOM and you can now access it as any other element that was already present in the DOM.

Note: The Confusion is caused as most of the times the event attachment happens at document ready and these dynamically created elements are added later and do not trigger these events. In order to avoid these scenarios Use delegations. Look for JQuery's .on method in detail.

Upvotes: 1

Gustav G
Gustav G

Reputation: 479

You simply just use $('.node').... But i think you understand that you can't manipulate a element that doesn't exist yet (you cant access .node before it's appended)

Upvotes: 0

Related Questions