iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
0
Modern Web

JavaScript 從零開始系列 第 30

JavaScript 從零開始 - Day30- createElement 與 for 迴圈的使用

JavaScript Note

用法跟 innerHTML 類似,寫到這邊有發現 for 迴圈在前端技術上大量的被使用。

data 資料

這次也是用一個主題來練習,找出學校的每一位老師,資料如下:

var data = [
  {
    teacher: "Mike",
    students: 40,
  },
  {
    teacher: "Onizuka",
    students: 35,
  },
];

新增一個 HTML 環境:

<body>
  <h1>學校每位老師的名字</h1>
  <ul class="school"></ul>
</body>

for 迴圈

先把基礎樣式寫好:

//變數
var el = document.querySelector(".school"); // 選取 ul 的這個 class
var dataLen = data.length; //資料長度
for (var i = 0; i < dataLen; i++) {}

在 for 迴圈把預計的條件寫入,

var str = document.createElement("li"); // 新增元素 li
str.textContent = data[i].teacher; // li 內的字串要顯示老師的名字
el.appendChild(str); // 增加子節點為 str 的內容

createElement

跟 innerHTML 不同的是,並沒有另外設定一個 var str="",原因是 createElement 的是用增加 DOM 元素的方式,不會將原本的資料覆蓋。這邊在 html 中加入兩個 <li>,為了要舉例 createElement 的特性。

<body>
  <h1>學校每位老師的名字</h1>
  <ul class="school">
    <li>蔡老師</li>
    <li>王老師</li>
  </ul>
</body>

增加子節點後,就會直接渲染在網頁上,不用像 innerHTML 還要在 for 迴圈外再加上 el.innerHTML 的語法。

//變數
var el = document.querySelector(".school"); // 選取 ul 的這個 class
var dataLen = data.length; //資料長度
for (var i = 0; i < dataLen; i++) {
  var str = document.createElement("li"); // 新增元素 li
  str.textContent = data[i].teacher; // li 內的字串要顯示老師的名字
  el.appendChild(str); // 增加子節點為 str 的內容
}

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

心得

透過這次練習得知,使用 createElement 之所以比較安全,效能差的原因要讀取許多程式碼執行後才會顯示,但安全性高是很重要的,所以可以簡單歸類成:

  • 自己人 = innerHTML
  • 外人 = createElement

上一篇
JavaScript 從零開始 - Day29- 使用 JavaScript 插入 createElement
下一篇
JavaScript 從零開始 - Day31- 認識 Event 事件
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言