Javascript [ document.write ]

양혜정·2024년 4월 6일
day51
0

HTML/CSS/JS 실행

목록 보기
23/60
post-thumbnail

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write() 를 사용하여 결과물 나타내기</title>

<script type="text/javascript" src ="./js/02.js"></script>

</head>
<body>
    <h1>안녕하세요? 저의 이름은 입니다.</h1>
    <p>페이지 전환을 하려면 확인버튼을 입력해주세요.</p>

    <button type="button" onclick="myFunction()">확인</button>
</body>
</html>

JS

function myFunction() {
    document.write("<div style='color:blue;'>자바스크립트 공부를 합니다.</div>" 
        + "<div style='color:red;'>javascript study를 합니다.</div>")   
    // 기존 내용을 모두 없애고 새로운 문서를 작성하는 것이다.
    // document.write()를 실행을 하면 모든 HTML 내용물은 삭제하고 () 속에 있는 것으로 사용한다.
}

정리

  • 02_output -> 02_document_write.html, 02.js
profile
양혜정
이전 포스트

Javascript [ InnerHtml ]

다음 포스트

Javascript [ Alert ]

0개의 댓글

관련 채용 정보