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블로그]

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
86	[javascript] 압축(Minify) / 난독화(Uglify)	졸리운_곰	2020.07.01	291
85	InnerHTML 사용시 알 수 없는 런타임 오류	졸리운_곰	2020.03.13	504
84	How to Create an addChild() Function in JavaScript	졸리운_곰	2020.03.09	437
83	JavaScript post request like a form submit	졸리운_곰	2020.03.09	474
82	[pure javascript] Vanilla JS equivalents of jQuery methods	졸리운_곰	2020.03.09	374
»	[Javascript] innerHTML 의 함정	졸리운_곰	2020.03.08	374
80	자바스크립트 헬로월드 javascrpt "hello world"	졸리운_곰	2019.10.06	474
79	Awesome Wasm Awesome	졸리운_곰	2019.05.18	784
78	이전 페이지의 주소 받기	졸리운_곰	2019.04.11	580
77	ADD/REMOVE CLASSES WITH RAW JAVASCRIPT 19 May 2010 2 min read By Jake Trent In Posts	졸리운_곰	2019.03.24	500
76	Merge and split table cells with JavaScript	졸리운_곰	2019.03.23	498
75	How can I detect if a selector returns null?	졸리운_곰	2019.03.23	296
74	How do I test for an empty JavaScript object?	졸리운_곰	2019.03.19	617
73	Grouping Array Data — JSON	졸리운_곰	2019.03.13	358
72	ECMAScript 6: maps and sets	졸리운_곰	2019.03.11	349
71	Comparing a Text Element and a String	졸리운_곰	2019.03.10	319
70	How to check whether a string contains a substring in JavaScript?	졸리운_곰	2019.03.10	366
69	자바스크립트 – 객체안에 값이 있는지 여부	졸리운_곰	2019.03.08	481
68	브라우저 현재 작업창 닫기	졸리운_곰	2019.03.07	473
67	[번역] 자바스크립트 클래스를 정의하는 3가지 방법 (3 ways to define a JavaScript class)	졸리운_곰	2019.03.06	476

첫 페이지 1 2 3 4 5 6 7 끝 페이지

쓰기

태그

	<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