动态创建的元素存储在哪里以及如何访问它们？ jQuery的

Question

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')? 如何访问div元素 $（'。node'）？

I know jQuerys 'on' method for events, but how do I simply access and manipulate that element? 我知道jQuerys'on'方法的事件，但我如何简单地访问和操作该元素？ Thanks. 谢谢。

Answer 1

Whether $('.some-list') is itself present in the document, or not, you could simply use: 无论$('.some-list')本身是否存在于文档中，您可以简单地使用：

$('.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')已存在于文档中：

 $('.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: 如果$('.node')元素不在文档中：

 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: 参考文献：

append() . append() 。
css() . css() 。
find() . find() 。

Answer 2

So lets analyse what would happen behind the scenes here. 因此，让我们分析一下幕后会发生什么。 First we need to understand the HTML that'd look something like below. 首先，我们需要了解看起来像下面的HTML。

<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>'); 请注意，当您编写$('.some-list') ，JQuery将选择带有class=some-list的div，然后在.append('<div class="node"></div>');附加一个随机字符串。 .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. 现在当你使用JQuery的追加时，它会尝试查看传递的数据（在这种情况下是一个字符串）是否是一个对象。 if object it internally does element.appendChild else it internally does element.innerHTML=string . 如果对象在内部执行element.appendChild ，则它在内部执行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 . 现在要访问你编写$（'。node'）的元素，因为这意味着你试图从类名作为节点获取dom中的元素。 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. 由于您在.append之后执行此操作，因此它在DOM中可用，您现在可以像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. 详细查看JQuery的.on方法。

Answer 3

你只需使用$('.node')....但我认为你明白你不能操纵一个尚不存在的元素（你无法在附加之前访问.node）

动态创建的元素存储在哪里以及如何访问它们？ jQuery的

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-06-07 16:49:39

解决方案2
1 2016-06-07 16:57:45

解决方案3
0 2016-06-07 16:47:50

动态创建的元素存储在哪里以及如何访问它们？ jQuery的

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-06-07 16:49:39

解决方案2 1 2016-06-07 16:57:45

解决方案3 0 2016-06-07 16:47:50

解决方案1
2 已采纳 2016-06-07 16:49:39

解决方案2
1 2016-06-07 16:57:45

解决方案3
0 2016-06-07 16:47:50