iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Modern Web

JavaScript 從零開始系列 第 29

JavaScript 從零開始 - Day29- 使用 JavaScript 插入 createElement

  • 分享至 

  • xImage
  •  

JavaScript Note

createElement

  • 方法:使用 DOM 節點來處理。(貼上 DOM 文章連結)
  • 優點:安全性高。
  • 缺點:效能差。

首先在 HTML 裡面新增一個 div

<div class="title">title</div>

createElement 英文字面意思就是「創造功能」,也就是在網頁上透過 JavaScript 新增一個節點功能,如下方程式碼所示,要在文件中新增一個 <em> 的標籤。

var str = document.createElement("em"); //新增 em 標籤
str.textContent = "新增文字";

appendChild

再透過一個語法 appendChild,增加子節點,並增加到變數 str 當中。

//增加子節點
document.querySelector(".title").appendChild(str);

英文直翻也很有意思,append 是附加的意思,Child 是小孩,可以理解成附加一個節點的小孩。

setAttribute

另外可以透過之前學過的 setAttribute 語法,動態新增一個 class 來優化,使新增的文字變成紅色。

str.setAttribute("class", "red"); //在 str 新增屬性

可參考 setAttribute 介紹。

codepen: https://codepen.io/hnzxewqw/pen/oNXYrOL


上一篇
JavaScript 從零開始 - Day28- innerHTML 與 for 迴圈的使用
下一篇
JavaScript 從零開始 - Day30- createElement 與 for 迴圈的使用
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言