假如我有一個 h1，h1 底下有一個空的 ul（.list），任務是帶出所有農夫的名字並插入 .list 中。

// HTML

// JS
// 建立陣列儲存資料
var farms = [
{
farmer: '卡斯伯',
dogs: ['張姆士', '龐的'],
},
{
farmer: '查理',
dogs: ['皮皮'],
}
];

// 選取要編輯的 DOM 元素
var el = document.querySelector('.list');
// 儲存陣列資料的總筆數
var farmLen = farms.length;
// 建立一個空字串
var str = '';
// 跑 for 迴圈
for(var i = 0 ; i < farmLen ; i++){
// 要插入的字串
var content = ''+ farms[i].farmer +'';
str += content;
}
el.innerHTML = str;
程式碼說明：

不能在迴圈中直接寫 el.innerHTML = content，因為 innerHTML 的特點是每次都會刪光原本的資料再覆蓋上去，以致於會把每次迴圈跑出來的結果給洗掉，只剩最後一個跑出來的結果。
+= 是累加的意思，代表每一次迴圈跑出來的結果都會被存入變數 str 中。
在迴圈跑完之後，才可以在迴圈外使用 innerHTML 把 str 的結果插入到 .list 中。
str += content 的意義
str += content 展開來就等於 str = str + content，整行程式碼用白話文來說就是「原變數 =（重新賦予值）原變數內容 + 新字串」。
舉例來說，當我們寫 var str= 'hello' 時，裡面就被賦予字串，而若我們有內容要加上去又不要影響原本的字串，那就可以派上用場。