在数组上循环并获取Li的每4个项目并将其添加到Ul列表

Question

我有这个li和类名列表的列表，我需要在它们上循环并获取它们的每4个列表，并将其附加到div内，类名为第一个wrp的div中，我用JavaScript制作了一个，并得到4个项，但字段为将其追加到ul中，因为存在is错误，称为

“未捕获的TypeError：无法在'Node'上执行'appendChild'：参数1的类型不是'Node'。”

 var fristWrp = document.querySelector('.fristWrp'); var list = document.querySelectorAll('.list'); var arrayList = Array.from(list); let iterations = Math.ceil(list.length / 4); for (var i = 0; i < iterations; i++) { var chunk = arrayList.slice(i * 4, (i + 1) * 4); var createUl = document.createElement('ul'); fristWrp.appendChild(createUl); createUl.appendChild(chunk); } 

 <div class="fristWrp"> </div> <li class='list'>text 1</li> <li class='list'>text 2</li> <li class='list'>text 3</li> <li class='list'>text 4</li> <li class='list'>text 5</li> <li class='list'>text 6</li> <li class='list'>text 7</li> <li class='list'>text 8</li> <li class='list'>text 9</li> <li class='list'>text 10</li> 

Answer 1

块是一个数组。 它应该是

var fristWrp = document.querySelector('.fristWrp');
var list = document.querySelectorAll('.list');

var arrayList = Array.from(list);
let iterations = Math.ceil(list.length / 4);
for (var i = 0; i < iterations; i++) {
  var chunk = arrayList.slice(i * 4, (i + 1) * 4);
  var createUl = document.createElement('ul');
  fristWrp.appendChild(createUl);
  chunk.forEach(function(item) {
    createUl.appendChild(item);
  })
}

Answer 2

您可以让查询选择器为您完成艰苦的工作:nth-child()

 var fristWrp = document.querySelector('.fristWrp'); var list = document.querySelectorAll('.list:nth-child(4n+1)'); Array.from(list).forEach((chunk) => { var createUl = document.createElement('ul'); fristWrp.appendChild(createUl); createUl.appendChild(chunk); }); 

 <div class="fristWrp"> </div> <li class='list'>text 1</li> <li class='list'>text 2</li> <li class='list'>text 3</li> <li class='list'>text 4</li> <li class='list'>text 5</li> <li class='list'>text 6</li> <li class='list'>text 7</li> <li class='list'>text 8</li> <li class='list'>text 9</li> <li class='list'>text 10</li>