---
# System prepended metadata

title: "\U0001F3C5 Day 22 - textContent"
tags: [JS 直播班 - 2022 秋季班]

---

---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 22 - textContent

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

### textContent 觀念複習

1. 透過 textContent 可以取得 DOM 元素內的 「純文字內容」，HTML 會被忽略（請注意「純文字內容」有包含換行以及空格）
    HTML:
    ```htmlembedded=
    <div class="targetClass">
      <p>取得這個 p 標籤的純文字</p>
    </div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass p");
    console.log(targetClass.textContent);
    ```
    結果（以下為 CodePen console 的結果）:
    ![](https://i.imgur.com/K2kQogT.png =300x)


2. 可以透過 textContent 替換 DOM 元素內的內容，需要注意以下幾個重點:
    - 原先的所有內容都會被清空（包含 HTML 標籤）
    - 新的內容將被瀏覽器解析成「純文字」，不會保留 HTML 標籤的特性。

    HTML:
    ```htmlembedded=
    <!--  以下的 p 標籤會被清空，替換成純文字 "<h3>修改後的內容</h3>" -->
    <div class="targetClass">
      <p>替換這個 p 標籤</p>
    </div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    targetClass.textContent = "<h3>修改後的內容</h3>";
    ```
    結果：
    (網頁渲染出的畫面)
    ![](https://i.imgur.com/MnrUGTh.png)
    (修改後的 HTML 結構)
    ![](https://i.imgur.com/MPM2pVi.png)


3. textContent 可以跟變數混合使用

    HTML:
    ```htmlembedded=
    <div class="targetClass"></div>
    ```
    JS:
    ```javascript=
    const targetClass = document.querySelector(".targetClass");
    let score = 100;
    targetClass.textContent = `<p>小華的成績為 ${score} 分</p>`;
    ```

    結果：
    (網頁渲染出的畫面)
    ![](https://i.imgur.com/GH77RQV.png)

    (修改後的 HTML 結構)
    ![](https://i.imgur.com/ZrGcOr2.png)

問題
---
請練習用 querySelector 取得以下元素，使用 textContent 將 p 標籤內的文字替換為「現在是綠燈！」，並嘗試帶入 `trafficSign` 變數。

HTML
```htmlembedded=
<p class="trafficAlert">現在是紅燈！</p>
```

JS
```javascript=
let trafficSign = "綠燈";
```

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

```javascript=
let trafficSign = "綠燈";
const trafficAlert = document.querySelector(".trafficAlert");
trafficAlert.textContent = `現在是${trafficSign}！`;
```
-->




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
|嗶嗶羊#8042|[Codepen](https://codepen.io/mazizlte-the-typescripter/pen/MWXyVGZ)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/KKeVQxy)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/zYarBaG)|
|Ayre#0016|[CodePen](https://codepen.io/yichunlin09/pen/qBKbNQq?editors=1010)|
|CloThEs#7837|[Codepen](https://codepen.io/CloThEsZ/pen/vYrLKVe)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/LYrGZaW)|
|Kimi #9564|[Codepen](https://codepen.io/kimihu91/pen/WNyQaeo)| 
|VT#0895 | [Codepen](https://codepen.io/vt197/pen/NWzxrQJ)|
|hsiung阿熊#4079|[Codepen](https://codepen.io/hsiungchi/pen/Vwdejor)|
|Lucie#3831|[Codepen](https://codepen.io/bisespei/pen/VwdejJM)|
|楓之聲#6945|[Codepen](https://codepen.io/sshane258/pen/bGKEwEJ)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/YzvwGwa)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/JjZGRoN)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/OJEMRRd?editors=1010)|
|yumy#1940|[CodePen](https://codepen.io/yumy_yamg/pen/RwJrRYj)|
|法希娜#3206|[CodePen](https://codepen.io/yiiserpf-the-encoder/pen/LYrGRbO)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/BaVjLpb)|
|勁辣雞腿寶#5817|[Codepen](https://codepen.io/orz311013/pen/ExRPgWm)|
|Data#9297|[Codepen](https://codepen.io/kirakira72/pen/yLEeaVY)|
| YC #2522 | [CodePen](https://codepen.io/YCLu/pen/jOKbxEO) |
|Hironaka#7367|[Codepen](https://codepen.io/Hironaka0815/pen/qBKbaPp)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/jOKWMYP)
|William Lai#0196|[Codepen](https://codepen.io/lai-weihan/pen/BaVjLYg)
|xherobruce#6825|[Codepen](https://codepen.io/winwinbruce/pen/JjZGRLM)|
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/poKgEVy?editors=1011)
| 芮綺#5224 | [CodePen](https://codepen.io/zhan70/pen/vYrLXRV) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/dyKGpdK?editors=1011) |
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/rNKxMLL)|
|amy芳#1385|[Codepen](https://codepen.io/amy-chieng/pen/oNybzPM)|
|予予#9627|[codepen](https://codepen.io/kiqzcraa/pen/poKgEKb?editors=1111)|
|hannahTW#2224|[codepen](https://codepen.io/hangineer/pen/ZERQpMe)|
| LHchien33#6232 |[codepen](https://codepen.io/lin_chien/pen/PoaZGxr?editors=1010)|
|Greta##0837|[CodePen](https://codepen.io/gretali/pen/qBKbaLK)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/vYrLXbb)|
|Hazel.#6020|[Codepen](https://codepen.io/Hazelhsieh/pen/RwJrGJE?editors=1011)|
|肉桂卷#0625|[Codepen](https://codepen.io/ginnlee/pen/MWXKbgo?editors=1011)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/ZERQBbX)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/GRGoNpK)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/PoaZbZw)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/WNyrorG?editors=1010) |
| Joy1712#4670 | [CodePen](https://codepen.io/Joy1712/pen/XWYXNmZ?editors=1011) |
| shinyhung#3825 | [CodePen](https://codepen.io/sean_1215/pen/poKgRyx?editors=1010) |
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/qBKbRad)
|Loran#1105|[CodePen](https://codepen.io/loranlin/pen/bGKEgeL?editors=1011)
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/bGKEgwL?editors=1111)|
|JustinLiu#9699|[CodePen](https://codepen.io/justin0227/pen/xxzZgdG?editors=1011)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/JjZGEWd?editors=1011)|
|Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/RwJrKjg?editors=1010) |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/GRGorOM?editors=1011)|
|Cookie SSS#6991|[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/YzvwNvQ?editors=1011)|
|粉蒸肉#6214|[Codepen](https://codepen.io/wrightyu/pen/zYarNmv?editors=1011)|
|banazita#5143|[CodePen](https://codepen.io/banazita/pen/QWxydzY?editors=1111)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/GRGorex?editors=1010)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/dyKGNBz)|
|RyanTsai#8906|[CodePen](https://codepen.io/linlaose/pen/dyKGvPV)|
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/WNyrpbW)|
|hungya#0773|[codepen](https://codepen.io/hungya777/pen/ExRPZeV?editors=1010)|
|心幻羽#0056|[codepen](https://codepen.io/linglingsyu/pen/QWxypdL)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/bGKEqrP?editors=1010)|
|教練#6451|[Codepen](https://codepen.io/monkeybear721/pen/XWYXMBg?editors=1010)|
|SASIMI#5099|[codepen](https://codepen.io/sashimi1327/pen/KKedGoQ)|
|KC_8685#9343|[codepen](https://codepen.io/cathy7411/pen/abKdWpa)|
|Chung#5951|[codepen](https://codepen.io/yuju16/pen/vYrLmeB?editors=1011)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/poKgPOa)|
|WEI_RIO#9342|[codepen](https://codepen.io/wei_wu/pen/rNKxmPQ?editors=1010)|
|beta lin#1445|[CodePen](https://codepen.io/linbeta/pen/eYKJWoP)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/rNKxwBP?editors=1012)|
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/yLEeXKr?editors=1010)|
|jimmyFang#9575|[Codepen](https://codepen.io/pohxiqqo/pen/qBKbjzr?editors=1010)|
|Beryl#2553|[Codepen](https://codepen.io/winterwinterpu/pen/eYKJEYp)|
|Amberhh#2465| [Codepen](https://codepen.io/Amberhh/pen/MWXKpRp) |
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/XWYXaep?editors=1010)|
|萱仔#0781|[CodePen](https://codepen.io/ting-hsuan/pen/bGKErPd?editors=1010)|
|jackson204#6363|[CodePen](https://codepen.io/jackson204/pen/BaVjway)|
|鑫鑫#4346 |[CodePen](https://codepen.io/Neil1024/pen/vYrLeLw?editors=1011)|
|哈囉哈#5196|[CodePen](https://codepen.io/bill0841205/pen/dyKGVvL?editors=1010)|
|shio#1414|[CodePen](https://codepen.io/shioyen/pen/abKdLMx)|
|蓁心#6229|[CodePen](https://codepen.io/tlorfrnl-the-typescripter/pen/GRGoONm?editors=1010)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/RwJrjZV?editors=1010)
|yoyo#1003|[codepen](https://codepen.io/crpbugqy-the-typescripter/pen/jOKWamv)
Ruby Chen#74523|[codepen](https://codepen.io/ruby92429/pen/QWxyaWP)
| 王懷英#7271          | [codepen](https://codepen.io/huaiying/pen/ExRPoyN)                   |
| 我是泇吟#5189        | [codePen](https://codepen.io/kljuqbxs/pen/mdKVpgg)                   |
| 黃士桓#7654          | [codePen](https://codepen.io/shr-huan-huang/pen/VwdeQvg)             |
| 雷雷#7844            | [codePen](https://codepen.io/lei-yi-jie/pen/mdKVXQV?editors=1010)    |
| mou#2215             | [codePen](https://codepen.io/shihchiehlan/pen/RwJrMLV?editors=1111)  |
| cbs#9007             | [Codepen](https://codepen.io/wasdjk/pen/ExRPLwm)                     |
| Vera#5592            | [CodePen](https://codepen.io/skvera/pen/JjZGvBM)                     |
| 黑白兔#0684          | [CodePen](https://codepen.io/johnny329/pen/abKdRvG)                  |
| bingsu#2362          | [Codepen](https://codepen.io/pmyfr/pen/xxzZMzm?editors=1010)         |
| yaru#6308            | [Codepen](https://codepen.io/lszaietc/pen/VwdeNLM?editors=1011)      |
| Eileen#6454          | [CodePen](https://codepen.io/Eileen-io/pen/jOKWRMj)                  |
| Peng#9811            | [Codepen](https://codepen.io/peng-027/pen/dyKGLLj)                   |
| Ryan Chiang#6649     | [Codepen](https://codepen.io/ryanchiang/pen/bGKEPga?editors=1010)    |
| 魚子醬#5220          | [CodePen](https://codepen.io/haihsuan/pen/GRGoVKQ?editors=1111)      |
| 柔柔#1716            | [Codepen](https://codepen.io/rouchen/pen/NWzxQxo)                    |
| charlottelee849#0366 | [CodePen](https://codepen.io/charlotte-lee/pen/MWXKNLj?editors=1011) |
| 竹輪#3335            | [CodePen](https://codepen.io/chikuwa0120/pen/WNywNXJ)                |
| Ron Liang#7277       | [CodePen](https://codepen.io/ron-go/pen/wvXGvjm)                     |
| 母湯#7211            | [Codepen](https://codepen.io/tommyshih77/pen/rNKeaJM?editors=1011)   |
| Judy Wei#6103        | [Codepen](https://codepen.io/Judy0718/pen/dyKMYMo)                   |
| yen #5757            | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=0011) |
| kancheng#3915        | [CodePen](https://codepen.io/kancheng/pen/abKNWpY)                   |
| yoshidc#0455         | [CodePen](https://codepen.io/yoshiyyc/pen/bGKpvBr)                   |
| 末次#0236            | [CodePen](https://codepen.io/yunjulee/pen/eYKZMMX)                   |
| suihsilan#9485       | [CodePen](https://codepen.io/suihsilan/pen/wvXGmQy?editors=1010)     |
|     Rr#2215                 |   [Codepen](https://codepen.io/rufangcheng/pen/MWXyPeJ)                                                                   |
| Paul#7426            | [CodePen](https://codepen.io/paul-1997/pen/VwdaGGQ)                  |
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/KKezLJq?editors=0010)|
|CofCat#9226|[Codepen](https://codepen.io/cofcat456/pen/MWXyMZZ?editors=1111)|
|Azi Hsieh#2861|[CodePen](https://codepen.io/AziHsieh/pen/MWXeJwQ)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/XWYKNVe) |
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/eYKzRZr) |
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/rNKLwEg)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/jOKrZYq?editors=1011)|
|健育#5748|[Codepen](https://codepen.io/c1317156/pen/ZERONpO)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/RwJRmed)|
|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/jOKrjvZ)|
|Kevin#6131|[Codepen](|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/jOKrjvZ)|
|Jill#5577| [CodePen](https://codepen.io/Jillkate/pen/QWxKwKB) |
|poetry1933#2713| [CodePen](https://codepen.io/poetry1932/pen/abKmZxr?editors=1111) |
|Cream#3449| [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/jOKMyRZ?editors=1111) |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/WNyGWXy)|
|Silvialu#4521|[codepen](https://codepen.io/Silvia091640/pen/dyKMqxe?editors=1111)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/OJEbRVW)|
|Yuna Huang#2692|[codepen](https://codepen.io/Yuna1002/pen/PoabOvN?editors=1011)|
|ling chang#1024|[codepen](https://codepen.io/ling-chang/pen/qBKqpMO)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/RwJoMvw?editors=1010)|
|Judy #7874|[CodePen](https://codepen.io/hsiaohan/pen/OJEbZXW?editors=1010)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/JjZbZjX)|
|Lou#0085|[CodePen](https://codepen.io/Lusie_H/pen/QWxGoXv?editors=1010)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/zYaNNbj)|
|Yishan#4902|[Codepen](https://codepen.io/gdjrehhw-the-animator/pen/BaVpZoe?editors=1010)|
|Velma#1693|[Codepen](https://codepen.io/Ze1225/pen/OJEWxWv?editors=1010)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/jOKyKRg?editors=1111)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/vYrxQXR?editors=1010)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/BaVWMmJ)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/WNyObOr?editors=1010)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/rNKwjbL?editors=1111)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/oNyevzO?editors=1010)|
|meimei#9524|[codepen](https://codepen.io/isnrudav/pen/ZERXvbz)|
|阿蘇#8531|[codepen](https://codepen.io/susu3131/pen/PoaJEdX?editors=1111)|
|艾瑞絲#6060|[codepen](https://codepen.io/wangyingju/pen/yLEzKMq)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/BaVJPGp)|
|pss940909#8650|[codepen](https://codepen.io/pss940909/pen/wvXyaZw)|
|Chloe#5422|[Codepen](https://codepen.io/Ironchloe/pen/yLEvzgB?editors=1010)|
|阿風#6890|[Codepen](https://codepen.io/Afonguwu/pen/wvXyrMY)|
|入門小菜G#0191|[Codepen](https://codepen.io/DennisLiu123123/pen/oNyqQxE)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/oNyPEbJ?editors=1010)|
|Ringo#7583|[Codepen](https://codepen.io/ringolai1988/pen/QWxJYEW)|
|samger#0808|[Codepen](https://codepen.io/lee-wei-hong/pen/XWYGmge)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/poZewoP?editors=1111)|

