본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

JavaScript innerHTML · this — 내용 교체와 이벤트 대상 완전 정리

by 왕진 2026. 7. 15.
반응형

 

 

Web Development · JavaScript

JavaScript innerHTML · this —
내용 교체와 이벤트 대상 완전 정리

innerHTML로 요소 내용 통째 갈아끼우기 · this로 "이 이벤트를 일으킨 그 요소"를 함수에 넘기기
시작 오늘 분석할 코드

오늘은 실무에서 정말 자주 마주치는 두 가지 짝꿍 개념을 함께 본다. 하나는 innerHTML — 요소의 내용을 문자열째로 바꿔치기하는 방법이고, 다른 하나는 this — 이벤트가 걸린 요소 자기 자신을 함수에 전달하는 방법이다. 두 코드 모두 클릭 한 번으로 화면이 바뀌는 예제다.

예제 1 — innerHTML로 내용 바꾸기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>innerHTML 활용</title> <script> function change() { let p = document.getElementById("firstP"); p.innerHTML= "나의 <img src='media/puppy.png'> 강아지"; } </script> </head> <body> <h3>innerHTML 활용 : 아래 글자에 클릭하면 예쁜 강아지가 보입니다.</h3> <hr> <p id="firstP" style="color:blue" onclick="change()">여기에 <span style="color:red">클릭하세요</span> </p> </body> </html>
예제 2 — this로 클릭한 요소 자신 넘기기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>this 활용</title> <script> function change(obj, size, color) { obj.style.color = color; obj.style.fontSize = size; } </script> </head> <body> <h3>this 활용</h3> <hr> <button onclick="change(this, '30px', 'red')">버튼</button> <button onclick="change(this, '30px', 'blue')">버튼</button> <div onclick="change(this, '25px', 'orange')"> 여기 클릭하면 크기와 색 변경 </div> </body> </html>
실제 출력 미리보기
▼ innerHTML 예제 — 아래 문장을 클릭하면 내용이 통째로 바뀐다 (실제 이미지 파일 대신 placeholder 박스로 표현)

여기에 클릭하세요

▼ this 예제 — 버튼 A·B·div가 같은 함수를 쓰지만, 클릭한 자기 자신만 바뀐다
여기 클릭 (div도 가능)
용어 용어 정리
innerHTML요소의 여는 태그~닫는 태그 사이 내용 전체(HTML 문자열)
this이벤트를 발생시킨 요소 자기 자신을 가리키는 키워드
onclick클릭 시 실행할 JS 코드를 지정하는 속성
getElementByIdid 값으로 요소 하나를 정확히 찾아오는 함수
파싱(parsing)문자열을 해석해서 실제 구조(요소)로 만드는 과정
이벤트 핸들러이벤트가 발생했을 때 실행되도록 등록된 함수
style 프로퍼티JS에서 요소의 인라인 스타일에 접근하는 객체
XSS악성 스크립트를 몰래 삽입해 실행시키는 보안 공격
1 innerHTML이 하는 일 — 내용 통째 교체
왜 "일부 수정"이 아니라 "통째 교체"인가?

innerHTML은 요소의 여는 태그와 닫는 태그 사이에 있는 모든 것을 하나의 문자열로 취급한다. p.innerHTML = "새 내용"처럼 대입하는 순간, 그 안에 있던 글자든 <span>이든 자식 요소가 몇 개였든 전부 지워지고 새 문자열로 완전히 갈아끼워진다. "이 부분만 바꿔줘"가 아니라 "안쪽 전체를 이걸로 교체해줘"라는 명령이다.

※ 원본 코드의 <p id="firstP"> 안에는 원래 "여기에 <span>클릭하세요</span>"가 들어있었다. change()가 실행되면 이 내용은 흔적도 없이 사라지고 "나의 강아지" 문장으로 완전히 바뀐다.
2 innerHTML에 태그 문자열을 넣으면 파싱된다
왜 문자열 "<img>"가 진짜 그림으로 보이는가?

핵심은 innerHTML이 대입된 문자열을 HTML 소스 코드로 다시 해석(파싱)한다는 점이다. "나의 <img src='media/puppy.png'> 강아지"라는 텍스트를 넣으면, 브라우저는 그 문자열 안의 <img>를 단순 글자가 아니라 진짜 이미지 태그로 다시 그려낸다. 그래서 결과 화면에는 "나의 [그림] 강아지"처럼 실제 이미지가 나타난다.

innerHTML
문자열을 HTML로 파싱해서 넣는다.
태그가 실제 요소로 렌더링됨.
이미지·서식 있는 내용 삽입에 사용.
textContent
문자열을 순수 텍스트로만 넣는다.
태그를 써도 글자 그대로 출력됨.
사용자 입력 등 안전한 텍스트 삽입에 사용.
3 this가 가리키는 것 — 이벤트를 일으킨 요소 자신
this는 누가, 언제 정하는가?

this는 코드에 미리 정해져 있는 값이 아니라, "함수가 지금 어떻게 호출됐는가"에 따라 그때그때 결정되는 특별한 키워드다. onclick="change(this, ...)"처럼 요소의 이벤트 속성 안에서 쓰인 this는, 그 이벤트가 걸려 있는 HTML 요소 자기 자신을 가리킨다. 버튼 A를 누르면 this = 버튼 A, 버튼 B를 누르면 this = 버튼 B다.

<button onclick="change(this, ...)">버튼 A</button> → 이 버튼을 클릭 → this = 이 <button> 요소 자체 <div onclick="change(this, ...)">...</div> → 이 div를 클릭 → this = 이 <div> 요소 자체

 

반응형

 

4 onclick="change(this, ...)" — 왜 자기 자신을 넘기는가?
this를 인자로 안 넘기면 무슨 일이 벌어지는가?

change(obj, size, color) 함수 입장에서는, 자신을 호출한 것이 버튼 A인지 버튼 B인지 div인지 스스로는 전혀 알 방법이 없다. 그래서 호출하는 쪽(HTML)에서 this를 첫 번째 인자로 직접 건네줘야, 함수 안에서 obj라는 매개변수로 그 요소를 넘겨받아 obj.style...처럼 조작할 수 있다.

※ 만약 onclick="change()"처럼 인자 없이 호출하면 함수 안의 obj는 undefined가 되고, obj.style.color = ...에서 "Cannot set properties of undefined" 에러가 난다.
5 obj.style로 스타일을 직접 바꾸기
obj.style.fontSize = "30px" 는 무슨 뜻인가?

모든 DOM 요소는 style이라는 프로퍼티(하나의 객체)를 갖고 있다. 그 객체의 color, fontSize 같은 속성에 값을 대입하면, 그 요소의 인라인 style이 즉시 그 값으로 바뀐다. 이때 CSS 속성 이름의 하이픈(-)은 JS에서는 카멜케이스로 써야 한다는 점이 중요하다.

CSS 속성명 JS에서 쓰는 이름 font-size → obj.style.fontSize background-color → obj.style.backgroundColor color → obj.style.color (하이픈 없어서 그대로)
6 함수 재사용 — 여러 버튼이 함수 하나를 공유
왜 change 함수가 딱 하나뿐인가?

예제 2에는 버튼 2개와 div 1개, 총 3개의 클릭 대상이 있지만 함수는 change 하나뿐이다. this 덕분에 "누구를 바꿀지"는 호출할 때마다 달라지고, "어떻게 바꿀지"만 함수 안에 공통 로직으로 남겨둘 수 있기 때문이다. 만약 this를 쓰지 않았다면 버튼마다 changeA(), changeB(), changeDiv()처럼 요소 개수만큼 거의 똑같은 함수를 따로 만들어야 했을 것이다.

※ this가 주는 실질적 이득
  • 버튼이 10개, 100개로 늘어도 함수는 여전히 1개
  • 공통 로직을 한 곳에서만 수정하면 모든 요소에 반영됨
  • "이 요소를 어떻게 바꿀지"와 "누구인지"를 분리해서 생각할 수 있음
7 innerHTML 사용 시 주의 — 보안(XSS)
왜 아무 문자열이나 innerHTML에 넣으면 위험한가?

innerHTML은 문자열을 실제 HTML로 파싱해서 요소로 만들어주는 편리한 기능이지만, 반대로 말하면 그 문자열 안에 악성 <script>나 이벤트 속성이 섞여 있어도 그대로 실행될 수 있다는 뜻이다. 댓글, 검색어, 닉네임처럼 사용자가 직접 입력한 값을 검증 없이 innerHTML에 그대로 넣는 것은 Cross-Site Scripting(XSS) 공격의 대표적인 원인이다.

※ 신뢰할 수 없는 값(사용자 입력 등)을 화면에 그대로 보여줘야 한다면, HTML로 파싱되지 않는 textContent를 쓰거나 서버·라이브러리 차원의 이스케이프 처리를 거쳐야 안전하다.
8 자주 하는 실수
실수 증상 해결
innerHTML과 textContent 혼동 태그 문자열을 넣었는데 그림 대신 <img ...> 글자가 그대로 보임 태그를 실제 요소로 렌더링하려면 innerHTML, 순수 글자만 넣으려면 textContent
onclick="change()"처럼 this를 안 넘김 함수 안 obj가 undefined가 되어 obj.style에서 에러 onclick="change(this, ...)"로 반드시 자기 자신을 전달
innerHTML += "..."를 반복 사용 매번 전체를 다시 파싱해 느려지고, 기존에 걸어둔 이벤트가 사라짐 가능하면 내용을 한 번에 조립해서 대입하거나 appendChild 사용
onclick 속성 안 따옴표 중첩 실수 "change(this, "30px", "red")"처럼 따옴표가 겹쳐 구문 오류 발생 바깥은 큰따옴표("), 안쪽 문자열은 작은따옴표(')로 통일
사용자 입력을 검증 없이 innerHTML에 대입 악성 스크립트가 실행되는 XSS 취약점 발생 가능 신뢰 못하는 값은 textContent 사용하거나 이스케이프 처리 후 삽입

핵심 한 줄 요약

innerHTML요소 내용을 통째로 교체 — 대입한 태그 문자열은 실제 요소로 파싱됨
this이벤트를 발생시킨 요소 자기 자신을 가리키는 키워드
onclick="fn(this,...)"자기 자신을 인자로 넘겨 함수 하나를 여러 요소가 공유
obj.style.속성요소의 인라인 스타일을 JS에서 직접 변경 (카멜케이스 이름)
보안신뢰 못하는 문자열을 innerHTML에 그대로 넣지 말 것 (XSS)

Tags

#JavaScript #innerHTML #this #DOM #이벤트 #onclick #요소내용변경 #이벤트핸들러 #함수인자 #자바스크립트기초 #JS #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, innerHTML, this, DOM, 이벤트, onclick, 요소내용변경, 이벤트핸들러, 함수인자, 자바스크립트기초, JS, 웹개발, 티스토리
반응형

'php' 카테고리의 다른 글

JavaScript 알까기 게임 - 랜덤 배치와 타이머 완전 정리  (0) 2026.07.15
JavaScript document.write() — 문서에 직접 출력 완전 정리  (0) 2026.07.15
JavaScript document 객체 — location·URL·readyState 완전 정리  (0) 2026.07.15
MySQL SUM 컬럼곱 — 가격×수량 합산 집계 완전 정리  (0) 2026.07.15
MySQL LIMIT 복사 · ADD CONSTRAINT — 제한 복사·PK 추가 완전 정리  (0) 2026.07.15

관련글

댓글

티스토리툴바