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

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

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

<div class="targetClass">
  <!--  註解、換行、空白也包含在內  -->
  <p>HTML 標籤的內容也被選取</p>
</div>

let targetClass = document.querySelector(".targetClass");
console.log(targetClass.innerHTML);

結果 (以下為 Chrome console 的顯示結果):

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

<!-- 以下的 p 標籤會被清空 -->
<div class="targetClass">
  <p>替換這個 p 標籤</p>
</div>

let targetClass = document.querySelector(".targetClass");
targetClass.innerHTML = "<h3>修改後的內容</h3>";

結果 1:
(網頁渲染出的畫面)

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


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

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

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

結果 1:
(網頁渲染出的畫面)

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


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

<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 |