JavaScript 基础知识- .innerHTML 与 for 迴圈的运用

前一篇讲到了 .innerHTML 来新增元素以及内容，还有组字串的技巧
这边我们就来建立一个阵列，依序把资料输入进去吧

首先先建立 HTML 结构:

<h1>名字列表</h1><ul class="list"></ul>

接着来建立一个 names 阵列，来存放多个名字:

var names = [    {        name: 'Jerry'    },    {        name: 'Tom'    },    {        name: 'Jack'    }]

这时候我们要準备来把资料依序放在 .list 下面了
首先我们先选取元素:

var el = document.querySelector('.list');

接着宣告一个变数来存放阵列的长度:

var Len = names.length;

再来宣告一个变数先存放空字串，至于这个变数要做什么，后面会说明:

var str = '';

现在我们就可以用 for 迴圈依序把资料捞出来，再搭配组合字串放进 .list 内了

for(var i=0; i<Len; i++){    var content = '<li>'+ names[i].name +'</li>';    el.innerHTML = content;}

照着上面做，这样就依序把资料放好了吗？
并不会的， .innerHTML 有一个特性每次输出前会清空所有的设定，所以所有的标籤跟文字都会不见，所以照着上面的迴圈跑，最后页面仅只会显示出 Jack 这最后一笔资料而已
而为了要解决这样的问题，str 变数就登场了，他是为了要解决 .innerHTML 这个问题，所以创造来存放累加字串的
而迴圈的撰写也会如下:

for(var i=0; i<Len; i++){    var content = '<li>'+ names[i].name +'</li>';    str += content;    // 如果想知道 str 是什么，可以在 console 查看    console.log(str);}

跑完迴圈之后，字串也累加完了，这时候可以在元素下，输出资料了:

el.innerHTML = str;

这时候页面就会完整的呈现每笔资料了
试着亲手写写看，了解看看吧!