前一篇講到了 .innerHTML 來新增元素以及內容，還有組字串的技巧
這邊我們就來建立一個陣列，依序把資料輸入進去吧

首先先建立 HTML 結構:

<h1>名字列表</h1>
<ul class="list"></ul>

接著來建立一個 names 陣列，來存放多個名字:

var names = [
    {
        name: 'Jerry'
    },
    {
        name: 'Tom'
    },
    {
        name: 'Jack'
    }
]

這時候我們要準備來把資料依序放在 .list 下面了
首先我們先選取元素:

var el = document.querySelector('.list');

接著宣告一個變數來存放陣列的長度:

var Len = names.length;

再來宣告一個變數先存放空字串，至於這個變數要做什麼，後面會說明:

var str = '';

現在我們就可以用 for 迴圈依序把資料撈出來，再搭配組合字串放進 .list 內了

for(var i=0; i<Len; i++){
    var content = '<li>'+ names[i].name +'</li>';
    el.innerHTML = content;
}

照著上面做，這樣就依序把資料放好了嗎？
並不會的， .innerHTML 有一個特性每次輸出前會清空所有的設定，所以所有的標籤跟文字都會不見，所以照著上面的迴圈跑，最後頁面僅只會顯示出 Jack 這最後一筆資料而已
而為了要解決這樣的問題，str 變數就登場了，他是為了要解決 .innerHTML 這個問題，所以創造來存放累加字串的
而迴圈的撰寫也會如下:

for(var i=0; i<Len; i++){
    var content = '<li>'+ names[i].name +'</li>';
    str += content;
    // 如果想知道 str 是什麼，可以在 console 查看
    console.log(str);
}

跑完迴圈之後，字串也累加完了，這時候可以在元素下，輸出資料了:

el.innerHTML = str;

這時候頁面就會完整的呈現每筆資料了
試著親手寫寫看，了解看看吧!