자바스크립트 코드로 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>
이렇게 작성하면 결과는?
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>';이와 같이 사용도 가능하다.
또한 innerText로는 < 와 같은 html special char 들이 변환되지않고
innerHTML 로는 < 이 < 로 변환되어 출력된다.
'웹 프로그래밍 > 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 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)
예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.
만약, 본문 공유를 원하신다면 링크 공유를 해주세요
저작권 정책 확인하기링크 공유하기