iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 23

【Day22】在網頁中插入HTML標籤的實務做法

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


上一篇
【Day21】給我一個節點,我可以把網頁改頭換面
下一篇
【Day23】我變我變我變變變:如何改變HTML元素的樣式
系列文
JavaScript老學徒筆記—馬步篇35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言