---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 JS 任務 Day21 - 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>`;

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答：

1.

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

2. 3
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/jOormZZ?editors=0010) |
| 02 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BaezRYR?editors=0011) |
| 03 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/bGyeWMo) |
| 04 | jerry | [Codepen](https://codepen.io/sony791210/pen/pombPOZ) |
| 05 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/jOormKz) |
| 06 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/qBGNmvE) |
| 07 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/RwmRgwp) |
| 08 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/wvbWewy?editors=1011) |
| 09 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/gOJMRQj?editors=1010) |
| 10 | han | [Codepen](https://codepen.io/iamHanCheng/pen/VwOjWqy?editors=1011) |
| 11 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/mdYEMBo) |
| 12 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/wvbWrZP?editors=1011) |
| 13 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/RwmRjrV?editors=1011)|
| 14 | Emma | [Codepen](https://codepen.io/huang_L/pen/JjqKORG)|
| 15 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/abrZqoa?editors=1010) |
| 16 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/WNBxMOE)|
| 17 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/xxNOWaR)|
| 18 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/xxNOjEX)|
| 19 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/MWdeGVJ)|
| 20 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/oNRLMqZ?editors=1010) |
| 21 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/rNgLEME) |
| 22 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/NWVrvaq) |
| 2３ | 知夜 | [Codepen](https://codepen.io/XiaoXiaTian2/pen/mdYrbPd) |
| 24 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/oNRzjGz) |
| 25 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/mdYrrPj) |
| 26 | Tanyaaaa | [Codepen](https://codepen.io/your-work) |
| 27 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/JjqRyxL) |
| 28 | boin | [Codepen](https://codepen.io/boinji/pen/rNgMPZr) |
| 29 | JY | [Codepen](https://codepen.io/jylee0805/pen/pombZxM) |
| 30 | 風羽 | [Codepen](https://codepen.io/Joy-Huang/pen/zYQKQqR) |
| 31 | kawa | [Codepen](https://codepen.io/z83xji6/pen/mdYrNYv?editors=1111) |
| 32 | macihuang | [Codepen](https://codepen.io/macy1215/pen/OJYbLpV) |
| 33 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/jOoVvXO) |
| 34 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/bGygJvm) |
| 35 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/wvbPRXB) |
| 36 | hao jing | [Codepen](https://codepen.io/hjxu/pen/VwOymmO?editors=1011) |
| 37 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/mdYgxdZ) |
| 38 | maru3096 | [codepen](https://codepen.io/deamru/pen/MWMzbMy) |

<!--
| num | user | [Codepen]() |
-->