자바스크립트를 화면에 출력하기
기본적으로 HTML은 코딩한 것을 화면에 출력하는 마크업 언어이다.
자바스크립트는 프로그래밍 언어로 데이터를 출력하려면
다음과 같은 명령어들을 사용해야 한다.
documnet.write()
document.write는 괄호 안에 것을 화면에 출력하는 메서드이다.
document.write는 웹페이지의 모든 내용이 로딩된 후 메서드가 실행되면
웹페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력한다.
따라서 주의해서 사용해야 한다.
innerHTML=" "
innerHTML은 통상적으로 document.getElementById, querySelector 같은 메서드를 함께 사용한다.
innerHTML은 innerText와 헷갈릴 수 있는데 둘의 차이점은 예제를 보면 바로 알 수 있다.
<head>
<meta charset="UTF-8"
<title>예제</title>
</head>
<body>
<div id="ex">마우스</div>
<script>
document.querySelector("#ex").innerHTML = "<h1>키보드</h1>";
->출력 (h1사이즈)키보드위의 결과는 마우스가 아닌 h1 사이즈를 가진 키보드가 나오게 된다.
innerText는 어떨까?
<head>
<meta charset="UTF-8"
<title>예제</title>
</head>
<body>
<div id="ex">마우스</div>
<script>
document.querySelector("#ex").innerText = "<h1>키보드</h1>";
->출력 <h1>키보드</h1>위의 결과는 정말 텍스트 그대로 <h1> 키보드 <h1>이 나오게 된다.
둘의 차이점은 다음과 같다.
innerHTML : html태그를 태그로 인식
innerText : html태그를 문자로 인식
innerHTML과 innerText 모두 유용하게 쓰일 것 같다.
둘의 차이를 확실히 이해하고 용도에 맞게 사용해야 할 것 같다.
자바스크립트는 아직 낯선 부분이 많다.
그러므로 친해지기 위해 열심히 공부해야겠다!
'html과 css' 카테고리의 다른 글
| TIL] css포지션(position) (0) | 2021.04.25 |
|---|---|
| TIL] input type과 box-sizing (0) | 2021.04.23 |
| TIL] Math (0) | 2021.04.20 |
| TIL] ajax와 api활용하기 (0) | 2021.04.14 |
| TIL]자바스크립트 기초 (0) | 2021.04.13 |