귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

Studying/JavaScript

자바스크립트 공부하기 - 진짜 매일 헷갈리는 innerHTML vs textContext

creamymood 2025. 3. 21. 01:59

나올 때 마다 까먹어. . 

이젠 기억 하자는 의미로 다시 한번 정리 - 💬


언제 써먹을지, 초 간 단 암 기 


 

🔥 "HTML 있냐? 없냐?"

  1. innerHTML → HTML 포함! (HTML까지 바꿀 수 있음)
    👉 "inner에 HTML까지 들어간다!"
  2. textContent → 텍스트만! (HTML 태그 제거됨)
    👉 "text만 남는다!"

📝 초간단 공식

  • innerHTML → "HTML까지"
  • textContent → "TEXT만"

 


 

이론


💻innerHTML

  • HTML 태그까지 포함해서 가져오거나 변경할 수 있어!
  • 예를 들어, <div> 안에 <b>안녕</b>이라는 태그가 있으면, innerHTML을 사용하면 <b>안녕</b> 그대로 가져와.
  • HTML을 추가할 수도 있어서 보안에 주의해야 해! (XSS 공격 가능성 있음)