웹 요소의 내용을 수정하는 innerText프로퍼티, innerHTML프로퍼티
자바스크립트에서는 웹 요소의 내용도 수정할 수 있다.
가장 쉬운 방법은 innerText, innerHTML프로퍼티를 사용하는 방법이다.
innerText, innerHTML프로퍼티는 선택한 태그 안에 내용을 바꾸는 역할을 하는 프로퍼티이다.
새로운 것으로 갈아치우게 되기때문에 원래 있었던 내용은 유지 시켜주지 않고 지워진다.
innerText 프로퍼티
: 텍스트 내용을 표시한다. (innerText는 글자만 바꿀 수 있다. )
innerHTML 프로퍼티
: 태그까지 반영하여 표시한다. (innerHTML는 안쪽에 있는 태그까지 모두 바꿀 수 있다.)
[기본형]
요소명.innerText = '내용';
요소명.innerHTML = '내용'; <!-- 클릭하면 inText() 함수 실행 -->
<button type="button" onclick="inText()">innerText로 표시하기</button>
<!-- 클릭하면 inhtml() 함수 실행 -->
<button type="button" onclick="inhtml()">innerHTML로 표시하기</button>
<h2>현재 시각 표시하기</h2>
<div id="current"></div>
button을 클릭하면 intex함수를 호출하며 실행해라 -
//오늘 날짜와 시간정보를 날짜 객체로 불러오기
let now = new Date();
function inText() {
document.getElementById("current").innerText = now;
}
function inhtml() {
document.getElementById("current").innerHTML = "<em>" + now + "</em>";
}
1. current 라는 id를 가진div를 선택해서 innerText 안쪽 내용을 now에 들어있는 정보로 바꿔라 (now에 들어있는 new Date는 현재 날짜와 시간등의 정보- 아래의 왼쪽 사진)
2. current 라는 id를 가진div를 선택해서 innerHTML 태그를 바꿔라 = em 기울이기 태그로 now를 감싸서 출력해라
