---
# System prepended metadata

title: "\U0001F3C5 Day 23 - innerHTML"
tags: [JS 直播班 - 2022 秋季班]

---

---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 23 - innerHTML

請同學依照下方觀念練習，並回答問題。

### innerHTML 觀念複習

1. 透過 innerHTML 可以取得 DOM 元素內的「HTML 內容」

    HTML:
    ```htmlembedded=
    <div class="targetClass">
      <!--  註解、換行、空白也包含在內  -->
      <p>HTML 標籤的內容也被選取</p>
    </div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    console.log(targetClass.innerHTML);
    ```

    結果（以下為 Chrome console 的顯示結果）:
    ![](https://i.imgur.com/Kn10GjQ.png)




2. 可以透過 innerHTML 替換 DOM 元素內的 HTML，需要注意以下幾個重點：
    - 原先的所有內容都會被清空
    - 新的內容將被瀏覽器解析成「HTML」，也就是說會保留 HTML 標籤的特性。
    
    HTML:
    ```htmlembedded=
    <!-- 以下的 p 標籤會被清空 -->
    <div class="targetClass">
      <p>替換這個 p 標籤</p>
    </div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    targetClass.innerHTML = "<h3>修改後的內容</h3>";
    ```

    結果：
    （網頁渲染出的畫面）
    ![](https://i.imgur.com/jlK0C6J.png)

    （修改後的 HTML 結構）

    ![](https://i.imgur.com/2ilR3vL.png)


3. innerHTML 可以跟變數混合使用

    HTML:
    ```htmlembedded=
    <div class="targetClass"></div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    let score = 100;
    targetClass.innerHTML = `<p>小華的成績為 ${score} 分</p>`
    ```

    結果：
    （網頁渲染出的畫面）
    ![](https://i.imgur.com/Qz857qD.png)

    （修改後的 HTML 結構）

    ![](https://i.imgur.com/El6951M.png)


問題
---
1. 請練習用 querySelector 取得以下 HTML 程式碼中的元素（`.list`），並運用 innerHTML 使其可以呈現出下方圖片的結構
![](https://i.imgur.com/zDJ7Ps2.png)

HTML：
```htmlembedded=
<ul class="list">
  <li>...</li>
</ul>
```

2. 根據下方 HTML 程式碼，若想使用 JS 在其新增一個使用 h1 標籤包覆，文字內容為「標題」的結構該如何撰寫，請在下方選項中選出可以正確呈現的程式碼

    HTML：
    ```htmlembedded=
    <div class="title"></div>
    ```
    選項：
    ```
    1. document.querySelector(".title").textContent = `<h1>標題</h1>`;
    2. document.querySelector(".title").textContent = `標題`;
    3. document.querySelector(".title").innerHTML = `<h1>標題</h1>`;
    ```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

1.
```javascript=
const list = document.querySelector(".list");
list.innerHTML = `<li>1</li><li>2</li><li>3</li>`;
```

2. 3
-->




回報區
---


|       Discord        |                                  CodePen / 答案                                  |     |
|:--------------------:|:--------------------------------------------------------------------------------:| --- |
|     嗶嗶羊#8042      | [Codepen](https://codepen.io/mazizlte-the-typescripter/pen/JjZXLad?editors=1010) |
|       威0#6919       |        [Codepen](https://codepen.io/n0918679182/pen/OJEMGMo?editors=1010)        |     |
|    masterYan#2480    |          [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/poKgBqy)           |     |
|   hsiung阿熊#4079    |               [Codepen](https://codepen.io/hsiungchi/pen/jOKWRWo)                |     |
|   xherobruce#6824    |              [Codepen](https://codepen.io/winwinbruce/pen/QWxyPNR)               |     |
|       VT#0895        |                 [Codepen](https://codepen.io/vt197/pen/QWxyPER)                  |     |
|     KC_8685#9343     |               [Codepen](https://codepen.io/cathy7411/pen/MWXKRbw)                |     |
|      yumy#1940       |               [CodePen](https://codepen.io/yumy_yamg/pen/MWXKRjY)                |     |
|     AuroraC#6539     |          [codepen](https://codepen.io/AuroraC/pen/XWYXQpK?editors=1111)          |     |
|      albee#9121      |        [Codepen](https://codepen.io/albee-chang/pen/NWzxmpm?editors=1111)        |     |
|      薯餅#3581       |             [Codepen](https://codepen.io/ColdingPoTaTo/pen/gOKPygd)              |     |
|     心幻羽#0056      |        [Codepen](https://codepen.io/linglingsyu/pen/OJEMGgr?editors=1111)        |     |
|      Ayre#0016       |        [Codepen](https://codepen.io/yichunlin09/pen/KKeVYyw?editors=1010)        |     |
|      yaru#6308       |         [Codepen](https://codepen.io/lszaietc/pen/oNybOop?editors=1010)          |     |
|     Eileen#6454      |               [codepen](https://codepen.io/Eileen-io/pen/eYKJoVd)                |     |
|    RyanTsai#8906     |                [CodePen](https://codepen.io/linlaose/pen/vYrLMja)                |     |
|      Beryl#2553      |             [CodePen](https://codepen.io/winterwinterpu/pen/bGKEJjX)             |     |
|      無名#6427       |          [CodePen](https://codepen.io/Nomoney/pen/wvXMZxL?editors=1010)          |     |
|     Winnie#1306      |      [Codepen](https://codepen.io/WinnieWuWinnie/pen/oNybOPq?editors=1111)       |     |
|      圈圈#4060       |           [Codepen](https://codepen.io/wjejfczn-the-bold/pen/JjZGVaO)            |     |
|      Yiru#0236       |          [Codepen](https://codepen.io/yiru94/pen/qBKbwPP?editors=1010)           |     |
|      威爾#1694       |                [CodePen](https://codepen.io/WILL_Wu/pen/eYKJoXv)                 |     |
|    Silvialu#4521     |              [CodePen](https://codepen.io/Silvia091640/pen/MWXyPgj)              |     |
|      Kimi #9564      |                [Codepen](https://codepen.io/kimihu91/pen/WNyQaeo)                |     |
|      Peng#9811       |                [Codepen](https://codepen.io/peng-027/pen/BaVjEgB)                |     |
|     楓之聲#6945      |               [Codepen](https://codepen.io/sshane258/pen/ZERQNby)                |     |
|    mandylai#4055     |              [Codepen](https://codepen.io/mandy-lai-2/pen/LYrGoRg)               |     |
|     WEI_RIO#9342     |                 [codepen](https://codepen.io/wei_wu/pen/gOKPJmO)                 |     |
|      amy芳#1385      |               [codepen](https://codepen.io/amy-chieng/pen/dyKGENa)               |     |
|     法希娜#3206      |   [codepen](https://codepen.io/yiiserpf-the-encoder/pen/bGKEyVV?editors=1011)    |     |
|     Jenny真#7532     |        [CodePen](https://codepen.io/wei-chen-wu/pen/MWXKdEO?editors=1010)        |     |
|    LHchien33#6232    |         [CodePen](https://codepen.io/lin_chien/pen/bGKEyeE?editors=1010)         |     |
|      Clara#1275      |         [CodePen](https://codepen.io/bsupixqu/pen/xxzZNLa?editors=1011)          |     |
|      kuku#3118       |              [Codepen](https://codepen.io/mengting-ku/pen/xxzZNYQ)               |     |
|   Cookie SSS#6991    |   [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/PoaZveZ?editors=1111)   |     |
|      yawun#0042      |               [CodePen](https://codepen.io/monicalin/pen/gOKPWzr)                |     |
|      芮綺#5224       |                 [CodePen](https://codepen.io/zhan70/pen/vYrLwrB)                 |     |
|      雷雷#7844       |        [CodePen](https://codepen.io/lei-yi-jie/pen/MWXKdxG?editors=1010)         |     |
|      大衛#4869       |         [CodePen](https://codepen.io/exnsrpjc/pen/poKgXzL?editors=1010)          |     |
|     Benson#6763      |                [Codepen](https://codepen.io/kumashow/pen/MWXKdNX)                |     |
|   勁辣雞腿寶#5817    |               [Codepen](https://codepen.io/orz311013/pen/QWxyXwa)                |     |
|     hungya#0773      |         [Codepen](https://codepen.io/hungya777/pen/RwJrmXr?editors=0010)         |     |
|       mou#2215       |       [Codepen](https://codepen.io/shihchiehlan/pen/zYarVwV?editors=0011)        |     |
|     PayRoom#8328     |               [CodePen](https://codepen.io/water38198/pen/PoaZrKK)               |     |
|    kenki100#0068     |                 [Codepen](https://codepen.io/ken100/pen/ZERQdaP)                 |     |
|      Loran#1105      |         [Codepen](https://codepen.io/loranlin/pen/ExRPBpa?editors=1011)          |     |
|    Potatolee#7749    |        [Codepen](https://codepen.io/potatoleee/pen/NWzxZYz?editors=1010)         |     |
|    jimmyFang#9575    |         [Codepen](https://codepen.io/pohxiqqo/pen/rNKxERN?editors=1010)          |     |
|    hannahTW#2224     |         [Codepen](https://codepen.io/hangineer/pen/NWzxZEL?editors=1010)         |     |
|    JustinLiu#9699    |        [CodePen](https://codepen.io/justin0227/pen/WNyrqVL?editors=1010)         |     |
|   0xWilliam #8796    |             [CodePen](https://codepen.io/0xWilliam0322/pen/MWXKNWg)              |     |
|      柔柔#1716       |                [Codepen](https://codepen.io/rouchen/pen/bGKEXez)                 |     |
|     魚子醬#5220      |                [CodePen](https://codepen.io/haihsuan/pen/RwJrXWQ)                |     |
|     Hazel.#6020      |        [CodePen](https://codepen.io/Hazelhsieh/pen/VwdeoYz?editors=1010)         |     |
|      Hilda#7085      |           [CodePen](https://codepen.io/vwquikad-the-vuer/pen/YzvwmVe)            |     |
|    banazita#5143     |         [CodePen](https://codepen.io/banazita/pen/rNKxbJW?editors=1111)          |     |
|     肉桂卷#0625      |          [CodePen](https://codepen.io/ginnlee/pen/qBKbeER?editors=1011)          |     |
|      予予#9627       |         [CodePen](https://codepen.io/kiqzcraa/pen/jOKWgxE?editors=1111)          |     |
| charlottelee849#0366 |       [CodePen](https://codepen.io/charlotte-lee/pen/gOKPVVJ?editors=1011)       |     |
|      JackC#0411      |                [CodePen](https://codepen.io/key0329/pen/ZERWzeX)                 |     |
|     SASIMI#5099      |              [Codepen](https://codepen.io/sashimi1327/pen/MWXaPqB)               |     |
|    beta lin#1445     |                [CodePen](https://codepen.io/linbeta/pen/ZERWEEM)                 |     |
|      竹輪#3335       |              [CodePen](https://codepen.io/chikuwa0120/pen/mdKPdjw)               |     |
|     bingsu#2362      |           [Codepen](https://codepen.io/pmyfr/pen/KKezKEJ?editors=1011)           |     |
|      萱仔#0781       |               [Codepen](https://codepen.io/ting-hsuan/pen/GRGZgKQ)               | .   |
|      母湯#7211       |        [Codepen](https://codepen.io/tommyshih77/pen/MWXyYqy?editors=1011)        |     |
|     Mylène#2481      |              [Codepen](https://codepen.io/hamajibashi/pen/OJENPBG)               |     |
|      azami#5986      |                 [CodePen](https://codepen.io/azami/pen/zYaqGGP)                  |     |
|   jacky010080#0880   |       [CodePen](https://codepen.io/Yen-Jung-Chen/pen/YzvqyxW?editors=1010)       |     |
|    Judy Wei#6103     |                [CodePen](https://codepen.io/Judy0718/pen/eYKZpgb)                |     |
|    shinyhung#3825    |         [CodePen](https://codepen.io/sean_1215/pen/RwJaWEg?editors=1011)         |     |
|      RJRS#9430       |                  [CodePen](https://codepen.io/RJRS/pen/RwJaWOZ)                  |     |
|     王懷英#7271      |                [CodePen](https://codepen.io/huaiying/pen/poKyjXB)                |     |
|      蓁心#6229       | [CodePen](https://codepen.io/tlorfrnl-the-typescripter/pen/wvXGGYz?editors=1011) |     |
|       安o#2448       |                [Codepen](https://codepen.io/JzhenAn/pen/wvXGGNo)                 |     |
|   Sentiments#4883    |               [codepen](https://codepen.io/Sentiments/pen/jOKqMPJ)               |     |
|     RayChen#6088     |              [codepen](https://codepen.io/raychen1996/pen/WNywoEG)               |     |
|      Vera#5592       |                 [codePen](https://codepen.io/skvera/pen/JjZXbZe)                 |     |
|       cbs#9007       |                 [Codepen](https://codepen.io/wasdjk/pen/MWXybNG)                 |     |
|     黃士桓#7654      |             [codePen](https://codepen.io/shr-huan-huang/pen/RwJapmq)             |     |
|    kancheng#3915     |                [CodePen](https://codepen.io/kancheng/pen/NWzNjgN)                |     |
|       YC#2522        |                  [CodePen](https://codepen.io/YCLu/pen/jOKbxEO)                  |     |
|     yoshidc#0455     |                [CodePen](https://codepen.io/yoshiyyc/pen/dyKMmVY)                |     |
|    我是泇吟#5189     |                [CodePen](https://codepen.io/kljuqbxs/pen/dyKMmzY)                |     |
|    suihsilan#9485    |         [CodePen](https://codepen.io/suihsilan/pen/WNywzKJ?editors=1010)         |     |
|    Ron liang#7277    |                 [CodePen](https://codepen.io/ron-go/pen/bGKpvPK)                 |     |
|   shio liang#1414    |                [CodePen](https://codepen.io/shioyen/pen/PoaNeNe)                 |     |
|   Ryan Chiang#6649   |        [Codenpen](https://codepen.io/ryanchiang/pen/xxzVjgE?editors=1010)        |     |
|    christina#6185    |               [Codepen](https://codepen.io/chrisc0210/pen/GRGZdEd)               |     |
|   出事了阿伯#9923    |       [Codenpen](https://codepen.io/BradpittLai/pen/yLEOjXB?editors=1010)        |     |
|     黑白兔#0684      |               [Codenpen](https://codepen.io/johnny329/pen/MWXKMwB)               |     |
|   jackson204#6363    |              [Codenpen](https://codepen.io/jackson204/pen/WNywKJz)               |     |
|      Paul#7426       |         [CodePen](https://codepen.io/paul-1997/pen/JjZXaey?editors=1010)         |     |
|   William Lai#0196   |               [CodePen](https://codepen.io/lai-weihan/pen/RwJaYme)               |     |
| Rr#2215              |        [Codepen](https://codepen.io/rufangcheng/pen/xxzVyWJ)                                                                          |     |
|      末次#0236       |                [CodePen](https://codepen.io/yunjulee/pen/LYrNgNr)                |     |
|     Hironaka#7367     |                [CodePen](https://codepen.io/Hironaka0815/pen/dyKMgxB?editors=0010)                |
|CloThEs#7837|[CodePen](https://codepen.io/CloThEsZ/pen/eYKZPXM)
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/yLEOQvx?editors=1012)|
|Amberhh#2465| [Codepen](https://codepen.io/Amberhh/pen/bGKEJqZ?editors=0010) |
|yoyo#1003| [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/ExRKrjv) |
|Lucie#3831|[Codepen](https://codepen.io/bisespei/pen/rNKeQxZ)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/XWYdLbP?editors=1010)|
|CofCat#9226|[Codepen](https://codepen.io/cofcat456/pen/abKNeNd)|
|Greta#0837|[CodePen](https://codepen.io/gretali/pen/PoaNMNR)|
|yen#5757|[CodePen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=0010)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/WNyxRrj) |
|Azi Hsieh#2861|[CodePen](https://codepen.io/AziHsieh/pen/KKeMaaZ)|
|Chung#5951 | [CodePen](https://codepen.io/yuju16/pen/YzvWNJq?editors=1010) |
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/YzvWQVP) |
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/dyKXdqQ?editors=1010)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/poKbmqR)|
|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/wvXWLLr)|
|Jill#5577|[CodePen](https://codepen.io/Jillkate/pen/PoaGwya)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/RwJGKzR?editors=1011)|
|Kevin#6131|[CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/MWXjpKZ?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/bGKwJLM)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/mdKOrOr)|
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/zYaoEmZ)|
|Yuna Huang#2692|[codepen](https://codepen.io/Yuna1002/pen/wvXopKd?editors=1011)|
|ling chang#1024|[codepen](https://codepen.io/ling-chang/pen/qBKqpvZ)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/qBKqYOz)|
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/NWzbMLM)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/XWYNYzd)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/YzvpOGX?editors=1010)|
|Lou#0085|[Codepen](https://codepen.io/Lusie_H/pen/VwdmNYZ)|
|Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/zYaNzZd?editors=1010)|
|Velma#1693|[Codepen](https://codepen.io/Ze1225/pen/YzvNrLE?editors=1010)|
|健育#5748|[Codepen](https://codepen.io/c1317156/pen/PoaWQGE?editors=1111)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/XWYpBXp)|
|Judy #7874|[CodePen](https://codepen.io/hsiaohan/pen/wvXJwvP)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/wvXJQJO?editors=1011)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/qBKrgxb)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/mdKwyXZ)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/vYrZxBa?editors=1010)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/VwdzZyw?editors=1011)|
|meimei#9524|[codepen](https://codepen.io/isnrudav/pen/WNyZdZB)|
|阿蘇#8531|[codepen](https://codepen.io/susu3131/pen/JjZrMQM?editors=1111)|
|艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/yLEzKzx)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/oNypMRN)|
|pss940909#8650|[codepen](https://codepen.io/pss940909/pen/QWxQjLy?editors=1011)|
|教練#6451|[codepen](https://codepen.io/monkeybear721/pen/qBKxjVQ?editors=1111)|
|Chloe#5422|[Codepen](https://codepen.io/Ironchloe/pen/LYrQzOj?editors=1010)|
|阿風#6890|[Codepen](https://codepen.io/Afonguwu/pen/oNyEGRd)|
|入門小菜G#0191|[Codepen](https://codepen.io/DennisLiu123123/pen/oNyqQxE)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/oNyPEbJ?editors=1010)|
|Ringo#7583|[Codepen](https://codepen.io/ringolai1988/pen/eYKbvrO?editors=1010)|
|samger#0808|[Codepen](https://codepen.io/lee-wei-hong/pen/BaVbpma)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/oNMwKRj?editors=1111)|