ํฐ์คํ ๋ฆฌ ๋ทฐ
[๐ฆ] text ์ผํ์ ๋น๊ต - textContent / innerText / innerHTML
์ฑ._. 2025. 1. 12. 13:16[ textContent / innerText / innerHTML ]
์ ์ ๋ชจ๋ ํ๊ฒ ์์์ ์ปจํ ์ธ ๋ฅผ ๊ฐ์ ธ์ค๊ฑฐ๋ ์ค์ ํ๋ ์ญํ ์ด๋ค.
์์ฑ ๋น๊ต
- textContent: ๋จ์ํ ํ ์คํธ๋ง ํ์ํ๊ฑฐ๋, ์จ๊ฒจ์ง ํ ์คํธ๊น์ง ํฌํจํด์ผ ํ๋ ๊ฒฝ์ฐ
- innerText: ์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ํ ์คํธ๋ง ํ์ํ ๋
- innerHTML: ์์ ๋ด๋ถ์ HTML ํ๊ทธ์ ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์ถ๊ฐํ๊ฑฐ๋ ์์ ํ ๋
| ์์ฑ | HTML ํ๊ทธ ํฌํจ ์ฌ๋ถ | ์จ๊ฒจ์ง ํ ์คํธ ํฌํจ ์ฌ๋ถ | ์ฃผ ์ฉ๋ |
| textContent | X | O | ํ๊ทธ๋ฅผ ์ ๊ฑฐํ ์์ ํ ์คํธ ๊ฐ์ ธ์ค๊ธฐ |
| innerText | X | X | ํ๋ฉด์ ๋ณด์ด๋ ํ ์คํธ ๊ฐ์ ธ์ค๊ธฐ |
| innerHTML | O | O | HTML ํ๊ทธ์ ํจ๊ป ๊ฐ์ ธ์ค๊ฑฐ๋ ์์ ํ๊ธฐ |
๋น๊ต ์์
See the Pen Untitled by ์ฑ์ฑ (@tknbwzhf-the-looper) on CodePen.
textContent
textContent๋ 'Node'์ ์์ฑ์ผ๋ก,
<script>๋ <style> ํ๊ทธ์ ์๊ด์์ด ํด๋น ๋ ธ๋๊ฐ ๊ฐ์ง๊ณ ์๋ ํ ์คํธ ๊ฐ์ ๊ทธ๋๋ก ์ฝ๋๋ค.

์ ์์ ์ ๋ฒํผ ํด๋ฆญ ์ ๋์ค๋ ์ฐฝ.
'์๋ ํ์ธ์? ๋ง๋์ ๋ฐ๊ฐ์์.'์ ๊ณต๋ฐฑ์ด ๊ทธ๋๋ก ํํ๋์ด ์๋ค.
๋ํ, 'display:none' ์คํ์ผ์ด ์ ์ฉ๋ '์จ๊ฒจ์ง ํ ์คํธ' ๋ฌธ์์ด๋ ๊ทธ๋๋ก ์ถ๋ ฅ๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
innerText
innerText๋ 'Element'์ ์์ฑ์ผ๋ก,
ํด๋น Element ๋ด์์ ์ฌ์ฉ์์๊ฒ '๋ณด์ฌ์ง๋' ํ ์คํธ๋ฅผ ์ฝ๋๋ค.

๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ค ๋๋ ์ฐ์๋๋ ๊ณต๋ฐฑ์ ๋ฌด์ํ๊ณ ํ๋์ ๊ณต๋ฐฑ๋ง ์ฒ๋ฆฌํ๊ธฐ ๋๋ฌธ์ ์์ ์ฐฝ์ฒ๋ผ ๋์จ๋ค.
๋ํ 'display:none'์ผ๋ก ์ ์๋ ๋ด์ฉ๋ ๋ณด์ฌ์ง์ง ์๋๋ค.
innerHTML
innerHTML์ 'Element'์ ์์ฑ์ผ๋ก,
ํด๋น Element์ HTML, XML์ ์ฝ์ด์ค๊ฑฐ๋ ์ค์ ํ ์ ์๋ค.

<div> ์์ ์๋ HTML ์ ์ฒด ๋ด์ฉ์ ๊ฐ์ ธ์จ๋ค.
์ฐธ๊ณ : https://hianna.tistory.com/483
'Language > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ๊ฐํน๊ฐ๋ค ํท๊ฐ๋ฆด ์ ์๋ ๋ฌธ์ ๋ค ! - ๋ฌธ์ ์ํ ์ค๋ต ํ์ด (1) | 2025.01.16 |
|---|---|
| [๐ฆ] ์๋~ ์ง๋๋ฒจ๋ก ์๋ ค๋๋ฆด๊ฒ์! (1) - promise (0) | 2025.01.16 |
| [๐ฆ] ๋ชจ๋ฌ์ฐฝ ์ฌ๋ฌ ์ถ๊ฐ ๊ธฐ๋ฅ ๊ตฌํํ๊ธฐ (0) | 2025.01.15 |
| ๊ทธ๋, id๋ ๊ฐ์ ธ์์ด. ์ด์ ์ด๋กํ ๊ฑด๋ฐ?! - find() (0) | 2025.01.15 |
| [๐ฆ] ํจ์์ return (0) | 2025.01.11 |