자바스크립트에서 컨텐츠를 화면에 출력하는 방법 중 많이 사용되는 것이 innerHTML과 innerText 이다. DB에서 불러온 자료를 자바스크립트를 이용해 컨텐츠를 구성하는데 많이 사용되지만 이 둘에는 차이가 있다. innerHTML 을 사용하면 컨텐츠에 HTML 속성까지 적용할 수 있고, innerText 를 사용하면 컨텐츠에 문자열만 구성할 수 있다.
자바스크립트 화면 출력 innerHTML innerText 차이 사용
javascript output
자바스크립트를 이용해 컨텐츠를 화면에 출력하는 방법은 여러가지가 있다.
화면에 컨텐츠를 표시하고 변경하는 것은 동적인 html 웹페이지에 유용하다.
자바스크립트를 이용해 컨텐츠를 표시하고 사용자에게 내용을 보여주고 이해시키는 작업을 하는 가장 기본적으로 알아두면 두고두고 써먹을 수 있다.
innerHTML innerText사용하기
innerHTML과 innerText 를 사용하면 지정된 id 또는 class 의 컨텐츠를 변경할 수 있다.
컨텐츠는 html 형식으로 된 내용이 될 수 있고, 문자열 텍스트로 된 내용일 수 있다.
저 2개의 기능을 사용하기 전에 차이점만 살펴보도록 하자.
- innerHTML
html 태그 속성까지 적용하여 컨텐츠 문맥을 구성한다. - innerText
html 태그 속성을 무시하고 문자열 텍스트로만 문맥을 구성한다.
<!DOCTYPE html>
<html>
<body>
<h1>InnerHTML InnerText 사용하기</h1>
<p id="Intml"></p>
<p id="InText"></p>
<script>
document.getElementById("Intml").innerHTML = "<b>" + (5 + 10) + "</b>";
document.getElementById("InText").innerText = "<b>" + (5 + 20) + "</b>";
</script>
</body>
</html>아래의 결과화면을 보면 innerHTML과 InnerText 로 문맥을 구성하고 있다.
차이점 또한 파악할 수 있다.
innerHTML 을 사용하면 임의로 설정한 html 요소가 적용되어 문맥을 구성되는 것을 볼 수 있다.
innerText 를 사용하면 임의로 설정한 html 요소는 무시되고 문자열 텍스트로 문맥이 구성되는 것을 볼 수 있다.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 메세지창 window.alert 사용 방법 javascript output (0) | 2021.09.19 |
|---|---|
| 자바스크립트 직접 출력 document.write() 사용 javascript output (0) | 2021.09.17 |
| 자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file (0) | 2021.09.14 |
| 자바스크립트 html body 태그에서 실행하는 방법 Executing javascript in html body tag (0) | 2021.09.12 |
| 자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag (0) | 2021.09.10 |
댓글