循环阵列，并获得每4项李，并将其添加到UI列表

Question

我有这个列表与类名列表我需要循环他们，并获得他们的每4个名单，并将其附加到UL div类名第一个wrp我用JavaScript创建一个并获得4个项目，但是将字段追加到ul中，因为这个错误称为

“Uncaught TypeError：'Node'上执行'appendChild'失败：参数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); 
 
     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>