Javascript 将元素附加到arr.each循环内的父元素

我正在编写一个循环，根据数组中的每个元素将子div附加到父div。我尝试创建父元素并将子节点附加到父元素。我的想法是我可以迭代一个数组，对于每个元素，我可以附加一个新的子元素

function createHtmlChildElems(arr){
  var list= document.createElement('div');
  var item= document.createElement('div');
  list.innerHTML = '';

  //iterate over my array and append something for each element in the array
  $.each(arr, function(index,element){  
    item.innerHTML=`index: ${index}` 
    list.appendChild(item);

  });
  return list;
}

列表仅返回包含一个子节点的父元素。例如，如果传入一个三元素数组，我希望结果包括 '索引：0' '索引：1' ‘索引：2’

---

但它只包含“索引：2”

您只创建了一个项目。您需要创建多个。您还可以在该逻辑中使用

map（）

函数createHtmlChillems（arr）{ 变量$list=$（''）； $list.append( $.map（arr，函数（索引，元素）{ 返回`index:${index}`； }); ); 返回$list； }

---

问题是因为您声明了单个

项

div，并在每次迭代中更新它。要附加多个元素，需要在循环中创建新的

div

实例：

函数createHtmlChillems（arr）{ var list=document.createElement（'div'）； list.innerHTML=''； arr.forEach（函数（元素、索引）{ var item=document.createElement（'div'）； item.innerHTML=`index:${index}` 列表。追加子项（项目）； }); 退货清单； } 变量foo=['a'，'b'，'c']； var elems=createHtmlChillems（foo）； document.querySelector（'div'）。append（elems）

---

而且您只创建了一个项目。如果您将

膳食

更改为

项目

，您将反复更改同一项目。项目的创建需要处于循环中。很抱歉，我为示例重命名了vars。在我的代码中，变量名匹配，我已经相应地更新了我需要在循环中创建它，如果你提交一个响应，我会在我可以的时候标记为应答

function createHtmlChildElems(arr){
  var $list = $('<div>');

  $list.append(
    $.map(arr, function(index, element){
      return `<div>index: ${index}</div>`;
    });
  );

  return $list;
}