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

# 🏅 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／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Billy_Ti#9716 | [Codepen](https://codepen.io/Ti-Show/pen/KKGEdyq?editors=1111) |
| 2 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/ExdMVed) |
| 3 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/gOBEaEM) |
| 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/qBJvOgG) |
| 5 | Quantum#6093 |[Codepen](https://codepen.io/Min-Hao-Hung/pen/dygrGep)|
| 6 | jia yu#8896 |[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/abRMdQv)|
| 7 | Jacky7035#9423 |[Codepen](https://codepen.io/adens123/pen/WNamrLa)|
| 8 | JimWang#6134 |[Codepen](https://codepen.io/Jim-Wang-the-selector/pen/OJBqMqZ)|
| 9 | henrykgb#5749 |[Codepen](https://codepen.io/henrymorgan666/pen/wvYOGeO)
| 10 | 姜承#8204 |[Codepen](https://codepen.io/Troy0718/pen/QWZoNZw)
| 11 | ChaosTu#9311 |[Codepen](https://codepen.io/torotu/pen/bGmZpxX)|
| 12 | 東東#5015 |[Codepen](https://codepen.io/wearymask/pen/ZEqPWNL)|
| 13 | Eero#1147 |[Codepen](https://codepen.io/Eero-Chiao/pen/abRMZeM)|
| 14 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/jOeJVWo) |
| 15 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/wvYOJgr) |
| 16 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/QWZovOe) |
| 17 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/NWOJgrx) |
| 18 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/qBJvjzG?editors=1010) |
| 19| wiimax#4564|[Codepen](https://codepen.io/willismax/pen/BaqbwOE)
| 20 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/RwedLeY)|
| 21 | N0c7iluc3n7#4390 |[Codepen](https://codepen.io/huang-yu-cheng/pen/KKGEXrp?editors=1111)
| 22 | peihsuan#6315 |[Codepen](https://codepen.io/peihsuanlai/pen/NWOJvzM)
|23|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/gOBEGNy?editors=1011)
| 24 |Ataraxia#9977|[Codepen](https://codepen.io/ataraxia8888/pen/qBJPWag)
| 25 |David0799#4415|[Codepen](https://codepen.io/David0799/pen/zYmbPZR)
| 26 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/vYVPWEv?editors=1111) |
|27|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/LYgaQBO)
|28| DeLi#8324 |[CodePen](https://codepen.io/delichaomoon/pen/YzJgJBv)
|29| 鄭舜仁#6606 |[CodePen](https://codepen.io/randomno/pen/YzJgRvb)
|30| yoyo#1003 |[CodePen](https://codepen.io/pen/WNamPpm)|
|30| K（アギルダー）#0386 |[CodePen](https://codepen.io/klay376014/pen/MWPxxbp)|
|31|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/mdzooQd)|
|32|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/KKGYKwV)|
|33|兔子#6746|[Codepen](https://codepen.io/CarrotDetector/pen/XWxQjGL)|
|34|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/MWPRbBw?editors=1111)|
|35|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/LYgvzWb)|
|36|jun777#2468|[Codepen](https://codepen.io/js18151102/pen/WNaWLxj?editors=1010)|
|37|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/RweOXKN)|
|38|喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/OJBGKzb)|
|39|FanJJ#8061|[Codepen](https://codepen.io/yfchenn/pen/PoyvKeG?editors=1010)|
|40|雲漢#5319|[codepen](https://codepen.io/pen/?editors=1011)
|41|Kulimusoda|[codepen](https://codepen.io/yuch3n_chen/pen/NWOVwKJ?editors=1010)|
|42|townyuan#2653|[codepen](https://codepen.io/townyuan/pen/qBJzQJP)|
|43|liam9930#4129|[codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/zYMYqpa?editors=1111)|
|44|JasonChang#7847|[codepen](https://codepen.io/jsonChangJava/pen/yLQNYOz)|
| 45 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/PoxZRZL) |
| 46 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/oNQWMbm) |
| 47 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/YzRxrGQ) |
| 48 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/gOQzQER) |
| 49 | hoyiiiii | [Codepen](https://codepen.io/hoyii/pen/RNbrGaN?editors=1010) |