javascript - 已动态添加到 DOM 的元素的第一个实例的选择器

Question

我正在尝试将页面完全加载后动态添加到 DOM 的元素的第一个实例作为目标。对于加载时包含在 DOM 中的元素，我知道您可以这样做:

$(function() {
  $('.ele').eq(0).text('Element found');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ele">Element</div>
<div class="ele">Element</div>
<div class="ele">Element</div>

但是我怎样才能对通过 jQuery 添加到 DOM 的元素完成同样的事情呢？

$(function() {
  $('body').append('<div class="ele">Element</div>');
  $('body').append('<div class="ele">Element</div>');
  $('body').append('<div class="ele">Element</div>');
});

addEventListener('load', function () {
  $('.ele').eq(0).text('Element found');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

对于这种情况，您应该使用 javascript，而不是 jquery:

$(function() {
  $('body').append('<div class="ele">Element</div>');
  $('body').append('<div class="ele">Element</div>');
  $('body').append('<div class="ele">Element</div>');
});

addEventListener('load', function () {
  document.getElementsByClassName('ele')[0].innerHTML = "Element found";
});