iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
0
自我挑戰組

JavaScript基礎30天系列 第 10

插入 HTML 標籤 DAY10

今天我們要來介紹
使用JavaScript來操控HTML的方法(2種)

  1. innerHTML
    方法: 組完字串後,傳進語法進行渲染
    優點: 效能快
    缺點: 有資安的風險,要確保所傳入的來源沒問題
    2.createElement
    方法: 以 DOM節點 來處理
    優點: 安全性高
    缺點: 效能差

innerHTML

接著我們舉一個簡單的例子
https://ithelp.ithome.com.tw/upload/images/20200924/201230390UAHMKLPSE.jpg
會發現網頁多了h1這個標籤
https://ithelp.ithome.com.tw/upload/images/20200924/201230392FLU8Y4txg.jpg
CodePen: https://codepen.io/wemyferb/pen/PoNVGpL?editors=1010

那假如一開始 div 標籤裡面就有內容
它會覆蓋過去呢 還是顯示原本內容
讓我們來看看
https://ithelp.ithome.com.tw/upload/images/20200924/20123039vcAXDljB4Q.jpg
CodePen: https://codepen.io/wemyferb/pen/YzqBGVj?editors=1010

會發現會覆蓋過去原本的內容
因為innerHTML 會把原先的內容清空 再賦予值


我們再來看看加了CSS後會發生什麼事
https://ithelp.ithome.com.tw/upload/images/20200924/20123039BCodBw9Rij.jpg

這裡可以看到單引號裡面是用雙引號
假如這裡使用單引號包著單引號
格式會錯誤!!!!!!!


innerHTML 搭配變數
https://ithelp.ithome.com.tw/upload/images/20200924/20123039l5UXSX8PMF.jpg
CodePen: https://codepen.io/wemyferb/pen/KKzJgQz?editors=1010


innerHTML 搭配for

https://ithelp.ithome.com.tw/upload/images/20200924/20123039Fy07FaKzoT.jpg
CodePen: https://codepen.io/wemyferb/pen/PoNVbab
這裡會發現只會取到第2個農夫的名字
原因就是上述剛剛提到的
innerHTML 會把原先的內容清空 再賦予值

所以這裡要改寫成
https://ithelp.ithome.com.tw/upload/images/20200924/20123039zD1uzu1WQx.jpg
CodePen: https://codepen.io/wemyferb/pen/VwagmGY?editors=1010


createElement

https://ithelp.ithome.com.tw/upload/images/20200924/20123039RZLfna8zbB.jpg
CodePen: https://codepen.io/wemyferb/pen/zYqeoXX
step1: 新增節點
step2: 利用 textContent 新增節點的文字內容 或是 setAttribute 來新增屬性
step3: 掛載節點到你想要的位置

我們在看另一個例子
若原本有內容 會像innerHTML 先清空再賦予值嗎??
https://ithelp.ithome.com.tw/upload/images/20200924/20123039ccKQbE9JFK.jpg
CodePen: https://codepen.io/wemyferb/pen/YzqBpoq
會發現它插入的位置是在原本內容的後方
原本內容並不會消失


createElement 搭配 for
https://ithelp.ithome.com.tw/upload/images/20200924/20123039mNcR4iC5O5.jpg
CodePen: https://codepen.io/wemyferb/pen/PoNVWGJ?editors=1010


總結
XSS 跨網站指令碼(Cross-site scripting)

innerHTML有可能會有 XSS攻擊
所以必須確認資料是安全的
才能渲染到畫面或傳送到後端

那今天就介紹到這裡啦
我們明天將會介紹
非常好玩的事件(event)
記得持續關注唷/images/emoticon/emoticon07.gif


上一篇
DOM常見寫法 DAY09
下一篇
事件基礎介紹 DAY11
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言