---
# System prepended metadata

title: "\U0001F3C5 DAY23 每日任務"
tags: [JS 直播班  - 2021 秋季班]

---

# 🏅 DAY23 每日任務
###### tags: `JS 直播班  - 2021 秋季班`

innerHTML 觀念複習
---
以下程式碼請同學親自貼入 CodePen 或 VSCode 觀察結果


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

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

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



### 2. 可以透過 innerHTML 替換 DOM 元素內的 HTML，需要注意以下幾個重點:
    1. 原先的所有內容都會被清空
    2. 新的內容將被瀏覽器解析成「HTML」，也就是說會保留 HTML 標籤的特性。

```htmlembedded=
<!-- 以下的 p 標籤會被清空 -->
<div class="targetClass">
  <p>替換這個 p 標籤</p>
</div>
```
```js=
let targetClass = document.querySelector(".targetClass");
targetClass.innerHTML = "<h3>修改後的內容</h3>";
```

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

結果 2: 
(修改後的 HTML 結構)

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


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

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

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

結果 2: 
(修改後的 HTML 結構)

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


問題
---
請練習用 querySelector 取得以下元素，並用 innerHTML 修改它的 HTML 結構。

```htmlembedded=
<div class="targetClass"></div>
```


回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔!

|      Slack      |                              CodePen                               |
|:---------------:|:------------------------------------------------------------------:|
|   Karen Huang   |           https://codepen.io/Coding_Snorlax/pen/gOxKjQr            |
|     Tim Lin     |              https://codepen.io/TimmyLin/pen/zYdaLbM               |
|     傅劍軒      |      https://codepen.io/seonkuraito/pen/oNeyMrv?editors=0010       |
|     POPEYE      |              https://codepen.io/popeye_ux/pen/QWMxVWa              |
|      阿和       |         https://codepen.io/shnny/pen/porKOyZ?editors=1111          |
|      米米       |      https://codepen.io/Jameshsu0407/pen/JjyZaRP?editors=1010      |
|     CloThEs     |          https://codepen.io/bogwdnxx-the-sans/pen/GRvGXrW          |
|      張喆       |               https://codepen.io/wow767t/pen/RwZJYgK               |
| Cheng Pei-hsuan |               https://codepen.io/PaCheng/pen/zYdGKpO               |
|      Genos      |              https://codepen.io/pb220416/pen/LYjrJQN               |
|      群嘉       |  https://codepen.io/efzdamnp-the-lessful/pen/PoKadQO?editors=1111  |
|   Iris Huang    |               https://codepen.io/ythuang/pen/oNeyPvN               |
|     Arista      |            https://codepen.io/arista-hsieh/pen/qBXKMJN             |
| 有廖先生(Rain)  |             https://codepen.io/billpop741/pen/dyzKqjO              |
|       Sam       |               https://codepen.io/sam-hsu/pen/GRvGXzy               |
|     蔡明達      |              https://codepen.io/bmzpfyxe/pen/NWgKQZB               |
|   Elaine Liu    |       https://codepen.io/elaine7598/pen/NWvzLOL?editors=1010       |
|      洋蔥       |  https://codepen.io/oikdkmxq-the-looper/pen/OJjEoKE?editors=0011   |
|  Jun Ting Lin   |              https://codepen.io/jake1155/pen/yLoERLm               |
|   Kelvin Hsu    |       https://codepen.io/kelvin001/pen/xxLzaRK?editors=1111        |
|     鄭安志      |        https://codepen.io/lwmtsgek/pen/PoKaymx?editors=1111        |
|     連小艾      |              https://codepen.io/bolaslien/pen/bGrKmWJ              |
|      Gill       |       https://codepen.io/Gill-Chin/pen/eYEKPEZ?editors=0011        |
|     Jie Du      | https://codepen.io/qgqonost-the-flexboxer/pen/BadVqrE?editors=1011 |
|      YuriT      |              https://codepen.io/wenfisht/pen/rNzKqWe               |
|     Jocelyn     |        https://codepen.io/enjoyful/pen/mdMKzaa?editors=1010        |
|     ZY Hsu      |         https://codepen.io/zihyin/pen/NWvzOEW?editors=1010         |
|      Yunei      |                https://codepen.io/Yunei/pen/eYEKQZG                |
|      大衛       |        https://codepen.io/exnsrpjc/pen/jOLKedb?editors=1010        |
|      Phil       | https://codepen.io/ctkeftjp-the-animator/pen/mdMKaRR?editors=1111  |
|      lumei      |               https://codepen.io/l_umei/pen/mdMKaBW                |
|   Andy Huang    |             https://codepen.io/HsuHuaHuang/pen/eYEKbbq             |
|     陳暐中      |         https://codepen.io/wei-z/pen/GRvGPzO?editors=1010          |
|    PeggyTsai    |      https://codepen.io/pei-chi-tsai/pen/XWaYoGJ?editors=1011      |
|     許閔翔      | https://codepen.io/oupbzfxq-the-scripter/pen/abyKMKR?editors=1111  |
|      Louis      |             https://codepen.io/Louis164156/pen/xxLzBve             |
|       Lai       |               https://codepen.io/co_lai/pen/QWMxPEQ                |
|     ZOE WU      |       https://codepen.io/Zoechiueh/pen/yLoEroQ?editors=1011        |
|    Aaron Tu     |               https://codepen.io/aarontu/pen/WNEyBmb               |
|    BeanHuang    |              https://codepen.io/Beanhuang/pen/wvqXVKe              |
|     Trista      |             https://codepen.io/trista6140/pen/abyKeWe              |
|       Yof       |        https://codepen.io/yangyof/pen/xxLJxGW?editors=1111         |
|       AKI       |              https://codepen.io/akichen27/pen/zYdLYJL              |
|       kk        |             https://codepen.io/potatokaka/pen/RwZBNRR              |
|      Yunyi      |       https://codepen.io/yunyi12374/pen/ZEJbKVW?editors=1011       |
|     黃士桓      |     https://codepen.io/shr-huan-huang/pen/porZvBY?editors=1010     |
|   Bella Shya    |        https://codepen.io/BellaXie/pen/jOLpbrr?editors=1010        |
|       YC        |                https://codepen.io/YCLu/pen/rNzrOYJ                 |
|     Mingyo      |        https://codepen.io/Nick-Yo/pen/mdMjVWO?editors=1011         |
|      Calon      |              https://codepen.io/Calon0118/pen/JjyBGLo              |
|     Booker      |           https://codepen.io/bookbasketball/pen/qBXyZKP            |
|   Steven Chan   |             https://codepen.io/Steven1220/pen/yLoqJEz              |
|     Bonnie      |      https://codepen.io/bonnieli1414/pen/KKvBgZB?editors=1010      |
|     劉維倫      |               https://codepen.io/lun0223/pen/dyzjZvQ               |
|      Anna       |        https://codepen.io/kycrleao/pen/YzxjeMv?editors=1011        |
|      Riley      |              https://codepen.io/jjpxbprd/pen/VwzBxGj               |
|       Gui       |              https://codepen.io/guitimliu/pen/LYjBmqG              |
|    danny123     |      https://codepen.io/binlandz123/pen/OJjwoLX?editors=1010       |
|     柯勝華      |       https://codepen.io/Chill-Nick/pen/yLoqGLp?editors=0010       |
|     tingyu      |         https://codepen.io/dgltu/pen/qBXyLqz?editors=1011          |
|      Sandy      |        https://codepen.io/Sandy_L/pen/PoKBLoL?editors=1011         |
|     Jasper      |              https://codepen.io/li-jasper/pen/QWMBRPL              |
|     艾瑞克      |         https://codepen.io/ericla/pen/dyzqXQa?editors=0010         |
|     蔣秉彣      |             https://codepen.io/the-pierre/pen/PoKdpBp              |
|   Yashien Lin   |       https://codepen.io/YashienLin/pen/PoKdJwJ?editors=1010       |
|    Vicky Kao    |             https://codepen.io/vicky03035/pen/vYJzpYo              |
|       phi       |             https://codepen.io/aiya861202/pen/eYEmVjR              |
|   Peter Chen    |        https://codepen.io/yuckugjy-the-sasster/pen/porOVOV         |
|      zaii       |       https://codepen.io/ivy2846357/pen/xxLyGaO?editors=0010       |
|      鉦勝       |       https://codepen.io/atckmax823/pen/OJjBjgM?editors=1011       |
|     kailun      |               https://codepen.io/Kailun/pen/ExvdoRO                |
|     Jun Hua     |              https://codepen.io/ydsyvkph/pen/ZEJqvrx               |
|     陳 sam      |              https://codepen.io/euldpliv/pen/NWvOmjr               |
|      Joey       |              https://codepen.io/Joey-Chen/pen/ZEJqNyw              |
|    lingxuan     |      https://codepen.io/penglingxuan/pen/OJjaNXp?editors=1010      |
|    三隻小貓     |              https://codepen.io/bagelover/pen/KKvrovj              |
|      Alvin      |            https://codepen.io/Alvin20201116/pen/QWMJBaR            |
|      肉魚       |              https://codepen.io/zoechen13/pen/PoKxvNz              |
|       小K       |              https://codepen.io/kelen1995/pen/qBXLYZV              |
|    Chia Chi     |       https://codepen.io/ClaraChen/pen/gOxZjjz?editors=1011        |
|      乃萱       |              https://codepen.io/nainaikuo/pen/ExvGrLr              |
|   Irene Wang    |        https://codepen.io/irene-wang-the-looper/pen/BadMpdY        |
|      吐司       |              https://codepen.io/malolulu/pen/LYjqwdO               |
|      Ching      |              https://codepen.io/Jaimedede/pen/YzxgMwV              |
|    debby yeh    |        https://codepen.io/bhliyoup/pen/bGrJear?editors=1111        |
|    kevinhes     |        https://codepen.io/kevinhes/pen/XWaQYdp?editors=1011        |
|      傑瑞       |     https://codepen.io/auatwood909815/pen/yLodyOq?editors=1011     |
|      paul       |      https://codepen.io/printfootya/pen/dyzBYWa?editors=1010       |
|       Aya       |             https://codepen.io/NoNameNote/pen/MWvMPMy |
|Jean Chiang| https://codepen.io/jeanchiang1221/pen/gOxVYBd|
| Juno Li | https://codepen.io/Juno026/pen/rNzXVBE
|Zooey Cheng |https://codepen.io/noraneko0430/pen/abyewvw?editors=1011
| Hamaji | https://codepen.io/hamajibashi/pen/mdBbmLB | 
|      YOYO       |      https://codepen.io/lumedkle/pen/bGoNaMd?editors=1111|
|Jeff|https://codepen.io/jeff-cheng/pen/xxXwBdN?editors=1010|
|ShinyChen|https://codepen.io/shinychen/pen/bGoLBjm |



