Question

我正在编写一个循环，该循环将基于数组中的每个元素将子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;
}

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

但它仅包含'index：2'

Answer 1

问题是因为您声明了一个item div，并在每次迭代中对其进行了更新。要附加多个元素，您需要在循环内创建新的div实例：

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

  arr.forEach(function(element, index) {
    var item = document.createElement('div');
    item.innerHTML = `index: ${index}`
    list.appendChild(item);
  });
  return list;
}

var foo = ['a', 'b', 'c'];
var elems = createHtmlChildElems(foo);
document.querySelector('div').append(elems);

<div></div>

请注意，我将$.each()调用更改为普通的forEach()，因此您不需要jQuery依赖。

Answer 2

您仅创建一项。您需要创建多个。同样，您可以在这里使用map()

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

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

  return $list;
}

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

2 个答案: