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

Question

我从来没有真正理解动态创建元素的行为背后发生了什么。 这是一个例子：

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

现在存储在哪里？ 如何访问div元素 $（'。node'）？

我知道jQuerys'on'方法的事件，但我如何简单地访问和操作该元素？ 谢谢。

Answer 1

无论$('.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')

如果$('.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>

如果$('.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>

参考文献：

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

Answer 2

因此，让我们分析一下幕后会发生什么。 首先，我们需要了解看起来像下面的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>

请注意，当您编写$('.some-list') ，JQuery将选择带有class=some-list的div，然后在.append('<div class="node"></div>');附加一个随机字符串。 .append('<div class="node"></div>'); 现在当你使用JQuery的追加时，它会尝试查看传递的数据（在这种情况下是一个字符串）是否是一个对象。 如果对象在内部执行element.appendChild ，则它在内部执行element.innerHTML=string 。

现在要访问你编写$（'。node'）的元素，因为这意味着你试图从类名作为节点获取dom中的元素。 由于您在.append之后执行此操作，因此它在DOM中可用，您现在可以像DOM中已存在的任何其他元素一样访问它。

注意：混淆是由于大多数情况下事件附件在文档就绪时发生，并且这些动态创建的元素稍后会添加，并且不会触发这些事件。 为了避免这些情况，请使用委托。 详细查看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