JS 筆記 - createElement 與 for 迴圈的使用

用法跟 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 迴圈把預計的條件寫入，

1
2
3

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