重复创建相同对象的Jquery循环

<ul id="itemList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$(document).ready(function() {
  // 使用jQuery的each方法循环遍历列表项
  $('#itemList li').each(function(index, element) {
    // 创建一个新的div对象
    var newDiv = $('<div></div>');
    // 设置新div的内容为当前列表项的文本
    newDiv.text($(element).text());
    // 将新div添加到页面中的某个容器中
    $('#container').append(newDiv);
  });
});

$(document).ready(function() {
  var fragment = document.createDocumentFragment();
  $('#itemList li').each(function(index, element) {
    var newDiv = $('<div></div>');
    newDiv.text($(element).text());
    fragment.appendChild(newDiv[0]);
  });
  $('#container')[0].appendChild(fragment);
});

$(document).ready(function() {
  $('#container').on('click', 'div', function() {
    alert($(this).text());
  });
  $('#itemList li').each(function(index, element) {
    var newDiv = $('<div></div>');
    newDiv.text($(element).text());
    $('#container').append(newDiv);
  });
});