# 🏅 3/17 (三) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

innerHTML 觀念複習
---
以下程式碼請同學親自貼入 CodePen 或 VSCode 觀察結果
[參考章節 1](https://courses.hexschool.com/courses/1289881/lectures/30768818)
[參考章節 2](https://courses.hexschool.com/courses/1289881/lectures/30768822)

### 1. 透過 innerHTML 可以取得 DOM 元素內的「HTML 內容」

<div class="targetClass">
  <!--  註解、換行、空白也包含在內  -->
  <p>HTML 標籤的內容也被選取</p>
</div>

let targetClass = document.querySelector(".targetClass");
console.log(targetClass.innerHTML);

結果 (以下為 Chrome console 的顯示結果):

### 2. 可以透過 innerHTML 替換 DOM 元素內的 HTML，需要注意以下幾個重點:
1. 原先的所有內容都會被清空
2. 新的內容將被瀏覽器解析成「HTML」，也就是說會保留 HTML 標籤的特性。

<!-- 以下的 p 標籤會被清空 -->
<div class="targetClass">
  <p>替換這個 p 標籤</p>
</div>

let targetClass = document.querySelector(".targetClass");
targetClass.innerHTML = "<h3>修改後的內容</h3>";

結果 1:
(網頁渲染出的畫面)

結果 2:
(修改後的 HTML 結構)


### 3. innerHTML 可以跟變數混合使用

<div class="targetClass"></div>

let targetClass = document.querySelector(".targetClass");
let score = 100;
targetClass.innerHTML = `<p>小華的成績為 ${score} 分</p>`

結果 1:
(網頁渲染出的畫面)

結果 2:
(修改後的 HTML 結構)


問題
---
請練習用 querySelector 取得以下元素，並用 innerHTML 修改它的 HTML 結構。

<div class="targetClass"></div>

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔!