---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> JS - DOM
>
# 🏅 JS 任務 Day20 - 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 | dean | [Codepen](https://codepen.io/ch933114/pen/ogXvbKV?editors=1010) |
|2| Saika| [Codepen](https://codepen.io/saika4501/pen/XJbrdXB?editors=1111)|
|3| jingle0900| [Codepen](https://codepen.io/EvaLi0472/pen/azOoNjg)|
| 4 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/VYLZjKp) |
| 5 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/jEPNrBd) |
| 6 | pastor | [Codepen](https://codepen.io/peter_hung/pen/LEVPZEN) |
| 7 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/zxGOZON?editors=1011) |
| 8 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/gbpYmvN?editors=1111) |
| 9 | B | [Codepen](https://codepen.io/Babel777/pen/dPobNaZ) |
| 10 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/OPVLgVz?editors=1010) |
|11|JHT| [Codepen](https://codepen.io/juanht/pen/raVBzjy?editors=1111) |
| 12 | 7Lun | [Day20-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/zxGOPXK) |
| 13 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/ogXvExO) |
| 14 | HawkeyeLin |[Codepen](https://codepen.io/long-long/pen/gbpYeWo)|
| 15 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/zxGOjvN) |
| 16 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/ZYGzQVX) |
| 17 | kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/qEdWKjw?editors=0011)|
|18|蛋殼|[Codepen](https://codepen.io/weybrian/pen/NPqKzmX)
| 19 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/PwqYdox?editors=1010)
| 20 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/xbGKaYY)
| 21 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/yyNLdXR?editors=1011) |
|22|小趴|[Codepen](https://codepen.io/papa2415/pen/xxNOWaR)|
| 23 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/RNPNKMK) |
| 24 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/ByNLaNO) |
| 25 | xiaocai_97765 | [Codepen](https://codepen.io/dupre55667788/pen/azOpKzY)
| 26 | ninii | [Codepen](https://codepen.io/niiniiii/pen/QwbvBGg)
| 27 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/ZYGyWKO?editors=1011) |
| 28 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/YPXryeB?editors=1111)|
| 29 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/ByoygWO)|
<!--
| num | user | [Codepen]() |
-->