JS 筆記 - 使用 JavaScript 插入 createElement

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