[DOM]-10.createElement與for運用

在這裡與innerHTML的差異在於，innerHTML要用字串在for迴圈累加，累加後再以innerHTML將累加後的字串全都渲染出來。 createElement的for迴圈不需要字串，在for迴圈每一次跑一次迴圈就增加一次。在前一個[DOM]-9.createElement寫法有提過不會像innerHTML將先前的資料刪除。

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

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

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

for(var i=0; i<farmLen; i++){
  var str = document.createElement('li');
  str.textContent = farms[i].farmer;
  el.appendChild(str);
}

codepen