---
# System prepended metadata

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

---

# 🏅 Day 16 - 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>`;
    ```



<!-- 解答：  

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 標籤包裝。

-->