# 9. createElement & for 的範例

### HTML:

    <h1>
        我的農場農夫名字：
    </h1>
    <ul class="list"></ul>

### JavaScript:

// array 陣列資料-農場：
var farms = [
    {
        farmer: '卡斯柏',
    },
    {
        farmer: '約翰',
    }
];

---

1. 指定要掛載的目標: .list
2. 設定 total 紀錄陣列資料長度
3. 跑一次 console.log 來確認陣列資料無誤

// 設定跑迴圈的材料:
var el = document.querySelector('.list');
var total = farms.length;
console.log(total);

---

1. 宣告 str 為新增一個 li 標籤
2. 於 str 掛上內容來跑陣列裡的農夫名字
3. 在el掛上前面所建立的li內容 - `el.appendChild(str);`

for (var i = 0; i < total; i++) {
    // 新增一個li資料：
    var str = document.createElement('li');
    str.textContent = farms[i].farmer;
    console.log(str);// 確認回報的資料是否正確
    el.appendChild(str);
}

- 大功告成～！

###### tags: `JavaScript - DOM 元素`