# 🏅 Day 23 - innerHTML

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

### innerHTML 觀念複習

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

HTML:

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

JS:

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

結果（以下為 Chrome console 的顯示結果）:

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

HTML:

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

JS:

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

結果：
（網頁渲染出的畫面）

（修改後的 HTML 結構）


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

HTML:

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

JS:

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

結果：
（網頁渲染出的畫面）

（修改後的 HTML 結構）


問題
---
1. 請練習用 querySelector 取得以下 HTML 程式碼中的元素（`.list`），並運用 innerHTML 使其可以呈現出下方圖片的結構

HTML：

<ul class="list">
  <li>...</li>
</ul>

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

HTML：

    <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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

1.

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

2. 3

textContent VS innerHTML

textContent => 單純書寫文字，故若寫入 <p> ，此標籤也會變成文字渲染到畫面上。
innerHTML => 可使用標籤，若使用 <p>我是p</p> ，畫面上就會呈現「我是p」並使用 p 標籤包裝。

-->

回報區
---
| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/poMwNrZ) |
| 02 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/RwXMEZa) |
| 03 | anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/PoMRXOp) |
| 04 | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/bGXvOzL) |
| 05 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/VwoXqOK) |
| 06 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/LYwdqPN?editors=1010) |
| 07 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/MWNVZRL) |
| 08 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/YzmaBZx?editors=1011) |
| 09 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/MWNVLXY?editors=1011) |
| 10 | brucelee0629 | [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/vYoRPyQ?editors=1011) |
| 11 | mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/dyxmrwr) |
| 23 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/yLmKrOv) |
| 13 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/abeYrwN?editors=1011) |
| 14 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/wvVmbrY?editors=1010) |
| 15 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/VwoXJOO) |
| 16 | kun._c8shakeit | [CodePen](https://codepen.io/barry91205/pen/VwoxwbE) |
| 17 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/BaXxyrZ) |
| 18 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/bGXMpom) |
| 19 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/yLmjJzV?editors=1010) |
| 20 | JIA | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/poMVbMw?editors=1010) |
| 21 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/yLmjXOe) |
| 22 | Celine | [CodePen](https://codepen.io/szuning/pen/KKORqYW?editors=1010) |
| 23 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/qBeYpdL?editors=1011) |
|24|Tatsu| [CodePen](https://codepen.io/chindesu0207/pen/ExqLQKx) |
| 25 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/abeGYpy) |
| 26 | Mos | [CodePen](https://codepen.io/mos25399/pen/QWerxBo?editors=1010) |
| 27 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/OJKZrzR) |
| 28 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/GRVdzjE) |
| 29 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/KKORjyd?editors=1010) |
|30|Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/LYwrYjQ) |
|31|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/NWQzMzp?editors=1011)|
|32|Mike|[CodePen](https://codepen.io/mike2049/pen/mdNKjJx?editors=1011)|
|33|是在哈囉|[CodePen](https://codepen.io/miyxdhem-the-solid/pen/XWvYLGR)|
| 34 | Emma | [CodePen](https://codepen.io/Emma0919/pen/JjgBbYq) |
| 35 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/MWNBmWV?editors=0011) |
| 36 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/WNVKOrL?editors=1011) |
| 37 | Jainee | [CodePen](https://codepen.io/Jainee0110/pen/LYwBLjL) |
| 38 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/mdNjxeq) |
| 39 | Ed Huang | [CodePen](https://codepen.io/yide1986/pen/RwXBqVx) |
| 40 | charlottelee | [CodePen](https://codepen.io/yide1986/pen/RwXBqVx) |
| 41 | 野鴿 | [CodePen](https://codepen.io/yide1986/pen/RwXBqVx) |
| 42 | kaka_945 | [CodePen](https://codepen.io/kay945/pen/bGXxGMO) |
| 43 | JRz | [CodePen](https://codepen.io/JRZHENG/pen/JjgaRQm?editors=1111) |
| 44 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/WNVgOBB) |
| 45 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/mdNzeKq) |
| 46 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/jOgeYwN?editors=1111) |
| 47 | Su | [CodePen](https://codepen.io/wuasu/pen/XWvxZpE) |
| 48 | iamcan | [CodePen](https://codepen.io/uhnxswdq-the-typescripter/pen/poMxLGB) |
|49|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/GRVYdOY?editors=1111)|
| 50 | Glen_69515 | [CodePen](https://codepen.io/glenyaochih/pen/NWQErYY?editors=1010) |
| 51 | alec1203 | [CodePen](https://codepen.io/soloayaya/pen/xxvQEVE?editors=1111) |
| 52 | Seris | [CodePen](https://codepen.io/Dale-Chien/pen/BaXGJVM?editors=1011) |
| 53 | jerry_66983 | [CodePen](https://codepen.io/Barry-C/pen/vYoQRvg?editors=1011) |
| 54 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/MWNxaap?editors=1011) |
|55|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/XWvQrVX?editors=1011) |
| 56 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/yLmWLdM?editors=1011) |
| 57 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/VYZZbWJ?editors=1011)
| 58 | haojing | [Codepen](https://codepen.io/hjxu/pen/XJrWqdb)
| 59 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/JoPamzN?editors=1011)

<!-- 可複製下方格式
| | | [CodePen]() |
-->