Loop String Array

Loop through an array or words and update a DOM element

HTML

<table class="inc_tableDesc">
<thead><tr>1st</tr></thead>
  <tbody></tbody>
</table>

JavaScript

var str = "AGE - 18 Years|CLASSIFICATION - No|APPELLATION - No|DATE DISTILLED - 3rdMarch1997|CASK TYPE - RefillEx-BourbonHogshead|GRAPE VARIETY - No|OUTRURN - 1 of 248bottles|ABV - 56.8%|COLOUR - 4";

var str_array = str.split('|');
var html="";sl=1;
for(var i = 0; i < str_array.length; i++) {
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
  html +="<tr><input type='hidden'>"+(i+1)+"</input>"+str_array[i]+"</tr>"
   console.log(str_array[i]);
}
document.querySelectorAll('.inc_tableDesc > tbody').appendChild=html;