---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 23 - innerHTML

請同學依照下方觀念練習，並回答問題。

### 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>`;

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

1.

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

-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:--------------------------------------------------------------------------------:|
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/ZEwebMx) |
| 詹姆士 | [CodePen](https://codepen.io/z111048/pen/JjxWGOo) |
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/RwvprjK)|
|lychee_kk|[CodePen](https://codepen.io/kakakala/pen/XWOMXyr)|
|Peng|[CodePen](https://codepen.io/H-Peng/pen/LYqWGaR?editors=1010)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/QWYpyoJ)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/GRzWoBv?editors=1010)|
|yuan!|[CodePen](https://codepen.io/townyuan/pen/mdvWVvB)|
|小夏|[CodePen](https://codepen.io/michaelhsia/pen/oNmZxNZ)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/PoVpNqa)|
|Helen|[CodePen](https://codepen.io/milkteamonster/pen/bGzqpeO?editors=1011)|
|yaoling.liang|[CodePen](https://codepen.io/Yao-Ling-L-/pen/wvNJGqN)|
| Eden |[Codepen](https://codepen.io/iseden/pen/xxMqVWr)|
| Winnie |[Codepen](https://codepen.io/codepen-io-winnie/pen/ExrWKEW?editors=1010)|
| Uli | [CodePen](https://codepen.io/uli1313/pen/PoVpzzY?editors=0010) |
| RX00 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/zYeZKGe?editors=1010) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/ExrWgar?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/qBgrZXj?editors=1011) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/XWOMjRQ?editors=1010) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/zYeZKEV) |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/JjxEMRo) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/xxMqEYx) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/GRzWjzM) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/abXJmEo?editors=1011) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/mdvWrNq?editors=1011) |
|CPing|[CodePen](https://codepen.io/CPing/pen/zYeZoKq?editors=1010)|
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/jOdypZw?editors=1011) |
| Allen | [CodePen](https://codepen.io/z111048/pen/JjxWGOo) |
| phyllis | [CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/GRzWrqb) |
| ming0712 | [CodePen](https://codepen.io/StevenHuang/pen/eYxvgLM?editors=1011) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/ExrWWyJ)|
|Andy|[Codepen](https://codepen.io/andy31342/pen/mdvWWOr?editors=1011)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/PoVppLE)|
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/zYeZwNq) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/WNPpjxP?editors=1111) |
| dora | [CodePen](https://codepen.io/dorayu/pen/eYxvWeJ?editors=1010) |
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/bGzqWMy) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/JjxWNzO) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/GRzWmbz) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/qBgrmzx?editors=1111) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/xxMqrNM) |
| hsuanlee1084 | [CodePen](https://codepen.io/hsuanlee1024/pen/XWOMerJ) |
| 荷菓かのり | [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/eYxvGpY?editors=1011) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/jOdBaWq?editors=1011) |
| gebyman| [CodePen](https://codepen.io/gebyman/pen/NWopwXr) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/RwvpxLG) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/QWYpaPZ) |
| Ching | [CodePen](https://codepen.io/tzuchingg/pen/oNmZpPx?editors=1010) |
| Oria | [CodePen](https://codepen.io/kajing/pen/poGeaao?editors=1111) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/NWopypo) |
| Mattie | [CodePen](https://codepen.io/mattielin/pen/jOdBpbW) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/LYqWLav?editors=1011) |
| xiaokui_71292|[CodePen](https://codepen.io/pen?template=poGeqrK)|
| JasonFu | [CodePen](https://codepen.io/jie-Fu/pen/gOqmqgz) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/BaMWxyp) |
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/ZEwepZd) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/VwgjXGp) |
| 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/abXWdrb) |
| Cosmos | [CodePen](https://codepen.io/violet7755/pen/GRzmjNZ) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/KKJmagV) |
| 郭芙蘭#6374 | [CodePen](https://codepen.io/flora_Kuo/pen/XWOReOK?editors=1011) |
| Ccccc | [CodePen](https://codepen.io/CyreneTsai/pen/MWLmOgK) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/wvNdpme) |
| 阿賀#3700 | [CodePen](https://codepen.io/sungho/pen/abXWYOw) |
| Joy-chiang | [CodePen](https://codepen.io/dcthmcje-the-reactor/pen/dyaWmzj?editors=1010) |
| Jerry | [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/PoVmvMy) |
| jiayu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/vYbmqya?editors=1010) |
| 小廷 | [CodePen](https://codepen.io/uyxkiake-the-selector/pen/mdvmZYZ?editors=1011) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/bGzWXGp) |
| 白夜 | [CodePen](https://codepen.io/Wei903/pen/dyaRzGa?editors=1011) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/eYxRMyB) |
| davidtt | [CodePen](https://codepen.io/David-Tsai/pen/ZEwyRpw?editors=1010) |
|_shun0130|[CodePen](https://codepen.io/koba60052ww/pen/KKJqYga?editors=0011)|
| shcopy |[CodePen](https://codepen.io/shcopy/pen/yLZzKvm)|
| Iris |[CodePen](https://codepen.io/iris831206/pen/abXqyPp?editors=1111)|
| Vivian2857 |[CodePen](https://codepen.io/vivian_lin/pen/ZEwrvmG?editors=1010)|
| xuan |[CodePen](https://codepen.io/xuan0915/pen/mdvXxMV?editors=1010)|
| ChrisSQR |[CodePen](https://codepen.io/ChrisSQR/pen/BaMYxOq)|
| Daylily |[CodePen](https://codepen.io/daylily/pen/bGzLxyZ)|
| jimmy.0706 |[CodePen](https://codepen.io/WeiJun-Mao/pen/eYxVxzd?editors=1111)|
| Lainie |[CodePen](https://codepen.io/Lainie88/pen/MWLVOdB?editors=1010)|
| Hank._.z |[CodePen](https://codepen.io/linoiaby-the-sans/pen/ZEwooeq)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/abXKoLm)|
|nini1202desu|[Codepen](https://codepen.io/tvxq5206/pen/YzBjNWL?editors=1011)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/mdvjQpz)|
|bf_tsai|[Codepen](https://codepen.io/BF-Tsai/pen/VwgGYyO?editors=0010)|
|NathanJames|[Codepen](https://codepen.io/ufo060204/pen/jOdeNYx)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/abXRgRm?editors=1010)|
|nikkita_3544|[Codepen](https://codepen.io/vanessa7259/pen/ZEwmayZ)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/YzBRJxm) |
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/wvNRrmG)|