JavaScript 基础知识-操控 HTML 的方法 .createElement

前面讲到了使用 .innerHTML 来操控 HTML，这里说明第二种方式 .createElement ，后面再说明两者的差异性

一样先建立一个名字清单的阵列:

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

接下来我们要依序把名字代入到 HTML 内，HTML 的结构如下:

<h1>名字清单</h1><ul class="list"></ul>

接下来我们就可以準备来放资料了，一样用 for 迴圈的方式依序捞出资料，而这次的差别在于我们不使用组字串跟 HTML 标籤的方式:

var el = document.querySelector('.list');for(var i=0; i<names.length; i++){    // 先建立 li 元素    var str = document.createElement('li');    // 再把资料放在创建的元素内    str.textContent = names[i].name;    // 最后将元素放在我们要显示的元素底下    el.appendChild(str);}

这样页面内会依序输出 Jerry Tom Jack
不同于 .innerHTML 会把前面的资料清空，所以我们也不用新增一个空字串来累加字串