Day23:在網頁中插入HTML標籤的實務做法

前一篇介紹了在網頁中利用DOM API改變HTML架構與內容的方法，這篇來談談createElement()與innerHTML這兩種做法的差異。

要在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()來處理。