---
# System prepended metadata

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

---

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

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]() | 
-->