createElement 與 for 運用

Posted on In

這篇要介紹「createElement 與 for 迴圈的搭配運用」

html:

1
2
3
4
<h1>每個農場的“農夫名字”</h1>
<ul class="list">
    
</ul>

JS:

🎃 farms陣列中，有兩個物件（兩個農場）

1
2
3
4
5
6
7
8
9
10
var farms = [
    {
        farmer: '卡斯伯',
        dogs: ['張姆士', '龐的']
    },
    {
        farmer: '查理',
        dogs: ['皮皮']
    }
];

現在，我要做的是：依序列出「farms陣列」中，每個農場的「農夫名字」

作法如下：

🎃 建立變數el，用來選取.list：
var el = document.querySelector('.list');

🎃 建立變數farmsLen，來計算出「farms陣列中，共有幾筆資料」：
var farmsLen = farms.length;

JS:

1
2
3
var el = document.querySelector('.list');

var farmsLen = farms.length;

這裡不需要使用「空的字串 var str = '';」

原因為：這裡會使用.appendChild來增加子節點

🎃 .appendChild的特性：

.appendChild會「在原本的資料“後面”」依序去增加「新的資料」，“不會”把原本的資料清除

for迴圈

1️⃣ 步驟一：用.createElement新增一個 DOM 元素

🎃 新增一個變數str，用來組字串–> 新增一個「<li></li>元素」：
var str = document.createElement('li');

2️⃣ 步驟二：在元素增加文字內容

🎃 用.textContent在變數str新增「文字內容」–> 農場的農夫名字： str.textContent = farms[i].farmer;

🍋 這時，<li></li>還不會出現在網頁上，因為「還沒有指定<li></li>要掛在哪個節點上」

3️⃣ 步驟三：要掛在哪個節點上

我要把<li></li>掛在.list上

🎃 用.appendChild，在.list掛上一個「子節點str」： el.appendChild(str);

‼️ 這裡的el.appendChild(str);一定要寫在「for迴圈裡面」，是因為：

用console.log(str);去看str的值，會是這樣

🍋 跑第 1 次 for 迴圈：str跑出「第一個農夫名字」

🍋 跑第 2 次 for 迴圈：str跑出「第二個農夫名字」

✅ 所以，el.appendChild(str);也要跑「兩次for迴圈」，才會“依序”掛上「子節點str」：
🍋 跑第 1 次 for 迴圈：str跑出「第一個農夫名字」–> 在.list掛上<li>卡斯伯</li>

1
2
3
<ul class="list">
    <li>卡斯伯</li>
</ul>

🍋 跑第 2 次 for 迴圈：str跑出「第二個農夫名字」–> 在.list掛上<li>查理</li>（掛在第一筆資料<li>卡斯伯</li>的“後方”）

1
2
3
4
<ul class="list">
    <li>卡斯伯</li>
    <li>查理</li>
</ul>

😄 列出「farms陣列」中，每個農場的「農夫名字」了

完整 JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var farms = [
    {
        farmer: '卡斯伯',
        dogs: ['張姆士', '龐的']
    },
    {
        farmer: '查理',
        dogs: ['皮皮']
    }
];

var el = document.querySelector('.list');

var farmsLen = farms.length;

for(var i=0; i<farmsLen; i++){
    var str = document.createElement('li');
    str.textContent = farms[i].farmer;
    el.appendChild(str);
}