tags: JavaScript

在网页中插入HTML标签的实务做法

前一篇介绍了在网页中利用DOM API改变HTML架构与内容的方法。

要在HTML中插入HTML标签有两种做法：

• createElement()：这种方法安全性高，但是效能较差。
• innerHTML：效能高，必须确认资料来源的资安没有问题才能使用这种方法，避免有心人是把不好的东西藏在资料中，让我们经由innerHTML写入网页里。

使用createElement()组字串

假设一个情境，有一天华山论剑大会的主办人金小庸要拟一份参加者名单列表，他只有拿到一个阵列，要把阵列的资料输出到网页上，如果是利用DOM API提供的方法，请问他要怎麽做？

这是金小庸拿到的阵列：

var heros = [
  {
    name:'黄药师',
    nickname:'东邪'    
  },
  {
    name:'欧阳锋',
    nickname:'西毒' 
  },
  {
    name:'段皇爷',
    nickname:'南帝' 
  },
  {
    name:'洪七公',
    nickname:'北丐' 
  },
  {
    name:'王阳明',
    nickname:'中神通' 
  }
];

金小庸要把名单输出到<ul class='list'></ul>中间：

<h1>华山论剑参加名单</h1>
<ul class="list">  
</ul>

如果以我们前一篇谈到的方法，会用for回圈的方式去捉资料，然後创造一个 <li> 的元素节点，把资料塞入<li>元素节点，再把他们利用回圈一个一个appendChild()到 <ul class="list"> </ul> 中间。

var inviteList = document.querySelector('.list');
var len = heros.length;
console.log(len);
for (var i=0; i < len; i++){
  var guest = document.createElement('li');
  guest.textContent = heros[i].nickname + ' : ' + heros[i].name;  
  inviteList.appendChild(guest);
}

以上就是利用createElement()创造节点在网页中插入HTML标签的方式。

使用innerHTML来组字串

而另外一种方法是以回圈用 innerHTML 组完字串之後，再将它渲染出来。这种方法的优点是效能快，缺点是有资安风险，必须确定拿到的资料没有问题，才能用innerHTML在网页中插入标签。

一样的情境，金小庸一样拿到了一个阵列，跟一个准备要填的空白网页，这次要用innerHTML来加入邀请名单：

这是金小庸拿到的阵列：

var heros = [
  {
    name:'黄药师',
    nickname:'东邪'    
  },
  {
    name:'欧阳锋',
    nickname:'西毒' 
  },
  {
    name:'段皇爷',
    nickname:'南帝' 
  },
  {
    name:'洪七公',
    nickname:'北丐' 
  },
  {
    name:'王阳明',
    nickname:'中神通' 
  }
];

金小庸要把名单输出到<ul class='list'></ul>中间：

<h1>华山论剑参加名单</h1>
<ul class="list">  
</ul>

使用innrHTML组字串的具体步骤如下：

• 抓取要插入内容的父容器节点，将它赋值给inviteList变数。
• 宣告一个名为guest的变数，赋予它空字串的值。
• 宣告一个名为len的变数，指定给他的值是heros阵列的长度。
• 利用回圈去跑阵列，每跑一次把「'' + heros[i].nickname + ' : ' + heros[i].name」塞到guest这个原本为空字串的变数中，直到条件满足跳出回圈。
• 然後把塞好塞满的guest变数，用innerHTML的方法插入名为inviteList变数的目容器节点後面。

var inviteList = document.querySelector('.list');
var guest = '';
var len = heros.length;
for(var i = 0; i < len ; i++){
  guest += '<li>' + heros[i].nickname + ' : ' + heros[i].name;
}
inviteList.innerHTML = guest;
                      

不论是innerHTML或是createElement()都是组字串的好方法，如果没有资安疑虑，innerHTML效能高，是首选。如果有资安疑虑，那就以createElement()来处理。