HTML Javascript) innerText vs innerHTML

2020.03.13 16:43

졸리운_곰 조회 수:425

Javascript) innerText vs innerHTML

자바스크립트 코드로 div 내부 글 p 태그 내부 등 내부의 글을 가져올때

innerText 또는 innerHTML 을 사용한다.

또는 반대의 경우 ~~가져올때~~ 입력할때 !

자기소개서에서 글자수를 체크 해줄때
입력 정보를 활용해서 뭔가를 하고싶을때 등등

여러가지 경우에서 내부의 텍스트값을 가져오고 싶을수 있다.

또는

어떤 값을 넣고 싶을때
사용자의 동작에 따라 HTML을 수정하고 싶을때 등

이렇게 반대의 경우로도 이용가능하다.

이 둘의 차이점을 알아보자.

JS에서 주의 : 대소문자를 틀리면 브라우저에서 작동을 안할수 있다.

차이를 알아보기 위해 HTML 코드를 다음과 같이 작성했다.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<p id="test">안녕하세요 <span>ㅎㅎ</span></p>
	<script type="text/javascript">
		alert(document.getElementById("test").innerText); //hi098123.tistory.com
		alert(document.getElementById("test").innerHTML); //hi098123.tistory.com
	</script>
</body>
</html>

이렇게 작성하면 결과는?

innerText

안녕하세요 ㅎㅎ

사용자에 보이는 텍스트값만을 가져온다.

복사 붙여 넣기 할때 "텍스트만 붙여넣기" 같은 느낌

innerHTML

안녕하세요 <span>ㅎㅎ</span>

HTML 구조까지 모두 복사한다.

innerHTML 을 이용해 HTML을 로딩후에 자바스크립트로 수정도 가능하고

수정 예시

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<p id="test">안녕하세요 <span>ㅎㅎ</span></p>
	<script type="text/javascript">
		document.getElementById("test").innerHTML="안녕 ㅎ"; //hi098123.tistory.com
	</script>
</body>
</html>

소스코드 작동 과정

로딩 이후 id 가 test인 값을 찾는다
내부의 HTML 코드를 "안녕 ㅎ" 로 바꾼다.

innerHTML 은 태그 같은것도 써서

document.getElementById("test").innerHTML='<a href="https://hi098123.tistory.com">안녕 ㅎ</a>';

이와 같이 사용도 가능하다.

[출처] https://hi098123.tistory.com/83

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
61	[web design][웹디자인][알아봅시다] 왕초보 피그마 기초 사용법???? 셀러님들 지금 당장 피그마 시작하세요! 그대로 따라만 해서 피그마 정복하기	졸리운_곰	2025.07.21	246
60	CSS selector	졸리운_곰	2024.08.02	689
59	[Web Design][웹 디자인] Sass(SCSS) 완전 정복!	졸리운_곰	2022.07.31	412
58	[HTML] HTML5 공간 분할 : 레이아웃(Layout)	졸리운_곰	2021.09.06	552
57	[HTML5] HTML 공간 분할	졸리운_곰	2021.09.06	528
56	[웹제작][웹디자인] 시각화 대시보드 를 만들기 위해 고려해야 하는 4가지	졸리운_곰	2021.09.05	588
55	웹사이트 디자인하는 방법	졸리운_곰	2020.12.30	406
54	카드형 디자인/갤러리/리스트 코딩하기.	졸리운_곰	2020.12.04	677
53	HTML DIV tag - 테두리 그리기 STYLE - BORDER	졸리운_곰	2020.08.26	241
52	CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기	졸리운_곰	2020.08.26	994
51	[button] CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)	졸리운_곰	2020.08.26	2293
50	GUI 디자이너를 위한 색상 참고 사이트	졸리운_곰	2020.08.04	610
49	생산성을 빠르게 높여주는, 프런트엔드 개발 툴 10가지	졸리운_곰	2020.04.10	488
48	Mustache 공유	졸리운_곰	2019.12.29	344
47	Mustache 템플릿 문법 수많은 언어에서 지원되는 초간단 템플릿 문법	졸리운_곰	2019.12.29	273
46	HTML/CSS기초_drop down 메뉴 만들기	졸리운_곰	2019.12.21	1243
45	반응형이란 무엇인가?	졸리운_곰	2019.11.20	449
44	<인터넷, 블로그팁: 마진(margin)과 패딩(padding)의 차이점이 뭘까?>	졸리운_곰	2019.11.01	504
43	CSS / 반응형 레이아웃 만들기	졸리운_곰	2019.02.08	572
42	Responsive Web ② - 반응형 웹을 위한 레이아웃 설계 방법	졸리운_곰	2019.02.08	634

첫 페이지 1 2 3 4 끝 페이지

쓰기

태그