JavaScript [Javascript] innerHTML 의 함정

2020.03.08 21:21

[Javascript] innerHTML 의 함정

나는 평소에 JQuery 에 익숙해져 있다가, 최근 들어서 pure javascript (=Vanila JS) 를 되도록 사용하기 위해 노력하고 있다.

왜냐? ES6 이후로 js 가 많이 좋아졌다고도 하고... Vue.js 를 앞으로 사용할일이 좀 있는데..

거기서도 JQuery를 같이 쓸거 같지도 않고...

여튼, 그래서 최근에는 Vanila JS로 엥간한 자바스크립트 코딩을 하려고 한다.

그래서, 어제 일을하다가 평소에 JQuery 로 내가 아주 즐겨쓰던 함수인 append() 를 어떻게 하면 Vanila JS 로 짤 수 있을까 생각하다가, 그냥 생각없이 element 의 innerHTML 에다가 다른 html string 을 덧붙여보았다.

얼추 UI 상으로 보았을때는 크게 문제가 없어보이는데...

이렇게 짯더니 문제점... 내가 할당했던 click 이벤트가 사라졌다는 것이다 !!!

그래서 innerHTML 에 대한 내용을 찾아봤다.

innerHTML : 요소(element)의 자손의 HTML 직렬화를 포함하는 DOMString 입니다. Setting the value of innerHTML 의 값을 설정(대입)하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하고, 생성된 노드로 대체합니다.

그리고 이런 말도 쓰여있었다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오.

즉, innerHTML 을 사용하게되면 해당 태그(element) 의 모든 하위 html 이 새로운 html 로 통째로 재생성 된다는 뜻이다.

그래서, 본 element를 포함한 모든 자손 element 의 각종 속성(event 포함)이 사라지게 되는 것이다.

아래에 처음에 실수했던 코드와 수정 후 코드 예제를 첨부한다.

	
			<div id="div">
		
			<button id="btn1">btn1</button>
		
			</div>
		
			<script>
		
			document.addEventListener("DOMContentLoaded", function (evt) {
		
			document.querySelector("#btn1").addEventListener("click", function (evt1) {
		
			alert("btn1 clicked!");
		
			});
		
			// #div element 하위의 모든 HTML element를 삭제후 재할당
		
			document.querySelector("#div").innerHTML += "<button id='btn2'>btn2</button>";
		
			})
		
			</script>

view raw 1_before.html hosted with ❤ by GitHub

	
			<div id="div">
		
			<button id="btn1">btn1</button>
		
			</div>
		
			<script>
		
			document.addEventListener("DOMContentLoaded", function (evt) {
		
			document.querySelector("#btn1").addEventListener("click", function (evt1) {
		
			alert("btn1 clicked!");
		
			});
		
			// #div element 노드의 특정 위치에 필요한 HTML 만 추가
		
			document.querySelector("#div")
		
			.insertAdjacentHTML("afterend", "<button id='btn2'>btn2</button>");
		
			})
		
			</script>

view raw 2_after.html hosted with ❤ by GitHub

innerHTML 대신 insertAdjacentHTML 을 사용한 것이 보이는가?

이 함수는 삽입하고자 하는 html 을 이미 사용중인 element 는 건드리지 않고 원하는 위치에 넣어준다.

자세한 내용은 여기를 참고하도록 하자.

- End -

출처: https://oniondev.tistory.com/17 [양파개발자 SW의 IT블로그]

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
31	[web개발] [jQuery] Select박스 option 값 선택하기	졸리운_곰	2021.10.20	652
30	[web개발][javascript][JQuery] textarea 값 설정및 값 가져오기	졸리운_곰	2021.10.19	441
29	[javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1	졸리운_곰	2021.09.07	570
28	[HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery	졸리운_곰	2021.06.01	739
27	textarea 태그에 값을 넣고 뺄때 아니면 개행문자 '\n'이 혼란이 온다	졸리운_곰	2019.04.08	692
26	jQuery ready와 load의 차이	졸리운_곰	2019.03.29	733
25	How can I detect if a selector returns null?	졸리운_곰	2019.03.25	454
24	jQuery.isEmptyObject()	졸리운_곰	2019.03.24	793
23	[jQuery]요소를 추가하는 메소드(append, prepend, after, before)	졸리운_곰	2019.03.10	575
22	jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드	졸리운_곰	2019.03.10	591
21	How do you convert a jQuery object into a string?	졸리운_곰	2019.03.10	454
20	JQuery 오브젝트 셀렉트한 select object의 내용 확인	졸리운_곰	2019.03.10	601
19	JQuery Object 선언 : jQuery creating objects [duplicate]	졸리운_곰	2019.03.06	542
18	[제이쿼리] 태그 및 요소 삭제, Remove()	졸리운_곰	2019.03.06	848
17	jQuery .each문(for문) 사용시 break, continue를 하려면?	졸리운_곰	2019.03.06	743
16	jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드	졸리운_곰	2019.03.06	543
15	[jQuery] 선택자에 변수 넣기	졸리운_곰	2019.03.04	642
14	JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery	졸리운_곰	2019.01.10	532
13	Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용	졸리운_곰	2019.01.07	625
12	[jQuery] Ajax 방법	졸리운_곰	2018.08.03	656

첫 페이지 1 2 끝 페이지

쓰기

태그

	<div id="div">
	<button id="btn1">btn1</button>
	</div>

	<script>
	document.addEventListener("DOMContentLoaded", function (evt) {
	document.querySelector("#btn1").addEventListener("click", function (evt1) {
	alert("btn1 clicked!");
	});

	// #div element 하위의 모든 HTML element를 삭제후 재할당
	document.querySelector("#div").innerHTML += "<button id='btn2'>btn2</button>";
	})
	</script>

JavaScript [Javascript] innerHTML 의 함정

[Javascript] innerHTML 의 함정

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com