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

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

### textContent 觀念複習

1. 透過 textContent 可以取得 DOM 元素內的 「純文字內容」，HTML 會被忽略（請注意「純文字內容」有包含換行以及空格）
HTML:

    <div class="targetClass">
      <p>取得這個 p 標籤的純文字</p>
    </div>

JS:

    const targetClass = document.querySelector(".targetClass p");
    console.log(targetClass.textContent);

結果（以下為 CodePen console 的結果）:

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

HTML:

    <!--  以下的 p 標籤會被清空，替換成純文字 "<h3>修改後的內容</h3>" -->
    <div class="targetClass">
      <p>替換這個 p 標籤</p>
    </div>

JS:

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

結果：
(網頁渲染出的畫面)
(修改後的 HTML 結構)

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

HTML:

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

JS:

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

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

(修改後的 HTML 結構)

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

HTML

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

JS

let trafficSign = "綠燈";

## 回報流程

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


<!-- 解答：

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)|