[JavaScript] #6 innerText, innerHTML 사용법(자바스크립트 태그, 텍스트 생성, 삽입, 수정)

자바스크립트로 html 태그를 변경하고 텍스트를 넣는 innerText와 innerHTML에 대해서 정리해보겠습니다!

 

---

1. innerText vs innerHTML 

• innerText : 태그 안의 텍스트를 가져오거나 바꾸는 기능 (바뀌는 범위 : <태그>(텍스트)</태그> => 텍스트만 바뀜)
• innerHTML : 태그 자체를 가져오거나 바꾸는 기능 (바뀌는 범위 : (<태그>텍스트</태그>) => 전체 다 바뀜)

 

2. innerText 예시

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

- tmp.innerText = '텍스트'를 사용하면 텍스트 자체가 바뀐다.

- 위의 예는 tmp.innerText += '텍스트'를 이용하여 계속해서 텍스트를 추가해준 예시

 

 

3. innerHTML 예시

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

- tmp.innerHTML = '태그'를 사용하면 전체 태그가 변경된다.

---

innerText와 innerHTML에 대해서 알아보았습니다!