---
# System prepended metadata

title: 7. innerHTML 搭配 for 語法應用
tags: [JavaScript - DOM 元素]

---

# 7. innerHTML 搭配 for 語法應用

- 農場陣列資料:

```
//JS 農場人員:
var farms = [{
        farmer: '卡斯伯',
    },
    {
        farmer: '約翰'
    }
];
```

- 初始 HTML UL 標籤:

```
<body>
    <ul class="list">

    </ul>
    <script src="js/all.js"></script>
</body>
```

- 事前準備:

```
// 指定到要顯示的元素:
var el = document.querySelector('.list');
// 農場資料長度:
var total = farms.length;
// 紀錄要組的字串:
var str = '';
```

### 為什麼需要 str 變數:

- 先嘗試用這組 for 迴圈 去 run 結果:

```
for (var i = 0; i < total; i++) {
    var content = '<li>' + farms[i].farmer + '</li>';
    console.log(content);
}

// 根據 console.log(content) 回報的結果:
<li>卡斯伯</li>
<li>約翰</li>
```

### 但如果這時候載入 innerHTML 並不會顯示兩個名稱:

```
for (var i = 0; i < total; i++) {
    var content = '<li>' + farms[i].farmer + '</li>';
    el.innerHTML = content;
}

// 畫面只會顯示最新的: 約翰
```

### 主因:

- 因為 for 迴圈的關係，innerHTML 經過畫面的刷新，只會更新到最新的`[i]`，故經過兩次 for 迴圈的運行 - 約翰會覆蓋掉卡斯伯的。


### 加入 str += 紀錄字串:

```
for (var i = 0; i < total; i++) {
    var content = '<li>' + farms[i].farmer + '</li>';
    str += content; // > ''<li>' + farms[i].farmer + '</li>';'
    console.log(str);
    
    // 註解:
    // str 內容 // > ''<li>' + farms[i].farmer + '</li>';'
}

// 使用 console.log(str)，可查看 str 當前的內容:
<li>卡斯伯</li>
<li>卡斯伯</li><li>約翰</li>

這樣一來，確實會顯示兩個 li 了。 最後:
```

### 完整代碼:

```
// 農場人員:
var farms = [{
        farmer: '卡斯伯',
    },
    {
        farmer: '約翰'
    }
];

// 指定到要顯示的元素:
var el = document.querySelector('.list');
// 農場資料長度:
var total = farms.length;
// 紀錄要組的字串:
var str = '';

for (var i = 0; i < total; i++) {
    var content = '<li>' + farms[i].farmer + '</li>';
    str += content; // > ''<li>' + farms[i].farmer + '</li>';'
    el.innerHTML = str;
    console.log(str);
}
```

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