并非所有动态创建的HTML元素都会显示出来

Question

有需要循环和创建列表项的动态数据。

我通过JQuery创建超文本标记语言元素，并将其插入超文本标记语言中。下面是代码

动态数据：

dynamicData = ["qqq","www","eee","rrr","ttt","yyy","uuu","iii"]

HTML：

<ul class="test-list"></ul>

JS：

fnData: function (dynamicData) {
    var ele = $('<li/>', {
      class: 'item',
      append:
        '<a href="javascript:void(0)" class="link">click</a>'
    });
    var htmlData = dynamicData.map((item, index) => {
      return ele;
    });
    $('.test-list').html(htmlData);
  }

当fnData函数被触发时，创建<li>元素，并使用map循环遍历动态数据。循环完成后，当$('.test-list').html(htmlData);完成时，htmlData的长度为8。浏览器输出中只显示一个<li>元素

不确定为什么它没有显示所有8个<li>项目

Answer 1

每次循环都会返回相同的元素。一个元素一次只能位于DOM中的一个位置。

每次都需要创建一个新元素。因此，在循环中创建元素。

fnData: function (dynamicData) {
    var htmlData = dynamicData.map((item, index) => {
      return $('<li/>', {
        class: 'item',
        html:
          '<a href="javascript:void(0)" class="link">click</a>'
      });
    });
    $('.test-list').html(htmlData);
  }