[DOM]-8.innerHTML與for運用

<h1>每個農場的農夫名字</h1>
<ul class="list"></ul>

var farms =[
  {
    farmer:'卡斯伯',
    dog:['張姆仕','龐德']
  },
  {
    farmer:'查理',
    dog:['皮皮']
  }
];

var el = document.querySelector('.list');
var farmLen = farms.length;
var str ='';

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

如沒有用空字串累加是沒辦法列出兩筆li的資料，原因是innerHTML渲染之前會刪除原本的資料，利用空字串是累加完一次渲染出來

codepen