# 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 元素`