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);

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)
  }
}