前面講到了使用 .innerHTML 來操控 HTML，這裡說明第二種方式 .createElement ，後面再說明兩者的差異性

一樣先建立一個名字清單的陣列:

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

接下來我們要依序把名字代入到 HTML 內，HTML 的結構如下:

<h1>名字清單</h1>
<ul class="list"></ul>

接下來我們就可以準備來放資料了，一樣用 for 迴圈的方式依序撈出資料，而這次的差別在於我們不使用組字串跟 HTML 標籤的方式:

var el = document.querySelector('.list');
for(var i=0; i<names.length; i++){
    // 先建立 li 元素
    var str = document.createElement('li');
    // 再把資料放在創建的元素內
    str.textContent = names[i].name;
    // 最後將元素放在我們要顯示的元素底下
    el.appendChild(str);
}

這樣頁面內會依序輸出 Jerry Tom Jack
不同於 .innerHTML 會把前面的資料清空，所以我們也不用新增一個空字串來累加字串