//配列 (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.