JavaScript 從零開始 - Day30- createElement 與 for 迴圈的使用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 30

Modern Web

JavaScript 從零開始系列第 30 篇

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

12th鐵人賽 javascript

Tim Hsu

2020-09-30 11:09:04

1369 瀏覽

分享至

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