//配列
(function(){
var fruitsArr = [
'banana', 'apple', 'orange', 'strawberry'
];
var hoge1 = document.getElementById('hoge1');
var eleUl = document.createElement('ul');
hoge1.appendChild(eleUl); //#hogeにulを挿入
for(var i = 0, arrLen = fruitsArr.length; arrLen > i; i++){
var list = document.createElement('li');
list.innerHTML=fruitsArr[i];
eleUl.appendChild(list); //ulにliを挿入
}
}).call(this);
//2次元配列
(function(){
var foodsArr = [
['banana', 'apple', 'orange',],
['poteto', 'carrot', 'cabbage'],
['meet', 'chiken', 'pork'],
];
var hoge2 = document.getElementById('hoge2');
var eleTable = document.createElement('table');
hoge2.appendChild(eleTable); //#hogeにulを挿入
for(var i = 0, fArrLen = foodsArr.length; fArrLen > i; i++){
var eleTr = document.createElement('tr');
eleTable.appendChild(eleTr);//tableにtrを挿入
for(var j = 0; 3 > j; j++){
var eleTd = document.createElement('td');
eleTr.appendChild(eleTd);//各trにtdを挿入
eleTd.textContent=foodsArr[i][j];//各tdに配列の値を挿入
};
};
}).call(this);
See the Pen js: 配列からリスト、表を作成 by nwstcode (@nwst) on CodePen.