티스토리 뷰
웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티
요소(element)는 객체기 때문에 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하여 웹 요소의 내용도 수정할 수 있다.
[예시]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>innerText, innerHTML</title>
</head>
<body>
<p id="test">hello, world!</p>
</body>
</html>
위 예시 코드를 활용하여 알아보자
innerText 프로퍼티
innerText 프로퍼티는 요소의 텍스트 콘텐츠를 설정하거나 반환한다.
[구문]
- get 방식 : element.innerText
ㄴ "let text = element.innerText"와 같이변수에 담아 활용해도 무방하다.
- set 방식 : element.innerText = "내용"
[설명]
예시 코드에서 #test id 값을 가진 p 태그의 텍스트 노드 값을 가져와보자 (get 방식)
다음으로는 텍스트 노드 값을 설정해보자 (set 방식)
할당 연산자를 통해 값을 새로 설정하면 기존에 있던 모든 하위 노드가 제거되고 하나의 새 텍스트 노드로 대체된다.
innerHTML 프로퍼티
innerHTML 프로퍼티는 요소의 HTML 콘텐츠(내부 HTML)를 설정하거나 반환한다.
[구문]
- get 방식 : element.innerHTML
ㄴ "let text = element.innerHTML" 과 같이 변수에 담아 활용해도 무방하다.
- set 방식 : element.innerHTML = "내용"
[설명]
get 방식으로 하게 될 경우 innerText와 큰 차이가 없어보일 수 있다.
set 방식에서 차이를 확인할 수 있다.
먼저 text 노드를 넣는 것도 반환값이 똑같고 문서 내에서도 변경사항을 똑같이 확인할 수 있다.
innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시하기 때문에 innerText 프로퍼티와 차이점을 보여준다.
"hello, world"를 "hello, JavaScript"로 변경하면서 굵은 글씨 효과를 주기 위해 <b> 태그로 감싸는 것을 시도하려고 한다.
먼저 innerText 프로퍼티로 태그까지 넣어 시도해보자.
이렇게 태그가 적용되지 않고 text 노드에 태그채로 들어가서 원하는 결과를 얻어낼 수 없다.
개발자도구에서도 text node로 인식하여 검정색 글씨로 보여준다.
다음으로 innerHTML 프로퍼티로 태그까지 넣어 시도해보자.
innerText로 시도했던 것과 다르게 우리가 원하는 결괏값을 얻어낼 수 있었고 개발자도구에서 확인하였을 때에도 정상적으로 태그로 인식하여 굵은 글씨가 적용되었다.
'Development' 카테고리의 다른 글
| 크롬 확장 프로그램 충돌로 인한 레이아웃 깨짐 문제 해결 (0) | 2024.01.09 |
|---|---|
| 웹 요소의 속성을 가져오거나 수정하는 방법 (1) | 2023.12.27 |
| DOM에 접근하는 다양한 방법 (2) | 2023.12.26 |
| 문서 객체 모델(DOM)이란? (0) | 2023.12.25 |
| 새 브라우저 창을 여는 window.open() 메서드 (1) | 2023.12.18 |