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

Question

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

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

现在存储在哪里？ 如何访问 div 元素 $('.node')？

我知道 jQuery 的事件“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() .