数组遍历循环问题

Question

var val = [

    'aa','bb','cc','|',
    'dd','ee','ff','|'
    ];

//...理想输出的数据格式为以 '|'分割为一行，向下循环

<p>

    <span>aa</span>
    <span>bb</span>
    <span>cc</span>
</p>
<p>
    <span>dd</span>
    <span>ee</span>
    <span>ff</span>
</p>

思路乱了

Answer 1

var arr=['aa','bb','cc','|', 'dd','ee','ff','|'];

var html=arr.reduce(function (str, item) {
    return item=='|'?str+item:str+'<span>'+item+'</span>'
},'');

html=html.split('|').map(function (item) {
    return item?'<p>'+item+'</p>':'';
});
html=html.join('');
console.log(html);

Answer 2

var test = document.getElementById("test");

var val = [
    'aa','bb','cc','|',
    'dd','ee','ff','|'
    ];
var  p = document.createElement("p");
test.appendChild(p)
for (var i = 0; i < val.length; i++) {
  if(val[i] != '|'){
    var  span = document.createElement("span");
    var html = '<span>'+ val[i] +'</span>'
    span.innerHTML = val[i]
    p.appendChild(span)
  } else {
    p = document.createElement("p");
    test.appendChild(p)
  }
}