Javascript) innerText vs innerHTML

카테고리 : 웹 프로그래밍/HTML 2019. 6. 13. 01:15

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

innerText 또는 innerHTML 을 사용한다.

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

 

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

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

 

또는

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

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

 

 

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

 

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

 

 

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

<!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>
HTML

 

이렇게 작성하면 결과는?

 

innerText

안녕하세요 ㅎㅎ
HTML

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

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

 

innerHTML

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

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>
HTML

소스코드 작동 과정

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

 

 

innerHTML 은 태그 같은것도 써서

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

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

 

또한 innerText로는 &lt; 와 같은 html special char 들이 변환되지않고

innerHTML 로는 &lt; 이 < 로 변환되어 출력된다.

저작자표시 비영리 변경금지

'웹 프로그래밍 > HTML' 카테고리의 다른 글

Javascript) encodeURI, decodeURI, encodeURIComponent, decodeURIComponent  (0) 2019.11.14
티스토리) Light-TT-EX 제거하기  (4) 2019.11.12
JS) Location.hash 와 URL의 #부분 처리  (0) 2019.10.27
extension) tabs.getSelected VS tabs.query  (0) 2019.10.17
HTML) CSS 불러오기  (0) 2019.05.29
HTML) 책갈피 만들기  (0) 2019.05.26
HTTPS 홈페이지 무료로 운영하기  (0) 2019.04.25
크롬 확장 프로그램 분석하기  (0) 2019.04.19

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글

hi098123여러 툴을 제공하고 자유로운글을 쓰는 공간 입니다.