Question

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

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

现在存储在哪里？ 如何访问div元素 $（＆＃39; .node＆＃39;）？

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

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>

参考文献：

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，然后当您使用JQuery时，在.append('<div class="node"></div>');之后添加一个随机字符串追加，它会尝试查看传递的数据（在本例中为字符串）是否为对象。如果对象在内部执行element.appendChild，则内部执行element.innerHTML=string。

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

注意：混淆是由于大多数情况下事件附件在文档就绪时发生，并且这些动态创建的元素稍后会添加，并且不会触发这些事件。为了避免这些情况，请使用委托。详细了解JQuery的.on方法。

Answer 3

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

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

3 个答案: