자바스크립트로 HTML요소 출력
자바스크립트 코드로 HTML요소를 웹 페이지에 직접 삽입하여 브라우저 윈도우에 출력되게 할 수 있다. 이 때 document.write() 혹은 document.writeln()을 사용한다. ※ writeln()은 줄바꿈(\n)문자가 삽입된다. 하지만 HTML에서 줄바꿈 문자를 줄바꿈으로 표현하지 않기 때문에 <pre>태그의 영역을 활요하여 w줄바꿈을 표현할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document.write() 사용</title>
</head>
<body>
</body>
<script>
//#1
document.write("<h3>Welcome</h3>")
document.write("<pre>");
document.writeln("hello");
document.write("hi");
document.write("<pre>");
// with는 반복되는 객체 사용을 편하게 사용하기 위해 작성한다
// with(객체명){실행할 문장;}
// 실행할 문장 앞에는 항상 객체명.이 붙게 된다.
with(document){
write("<h3>Welcome</h3>");
write("<pre>");
writeln("hello");
write("hi");
write("<pre>");
}
/*실제 출력시 with를 쓰면 글이 쪼그라들어서 나온다. #1을 주석하고 실행하면 정상적으로 나온다
왜 이렇게 나오는지 이유를 찾지 못했다.
*/
</script>
</html>
실습
예제
<br>태그를 사용하지 않고, 덧셈의 결과를 직접 연산을 통해 출력한다. 아래의 문서를 그대로 write(), writeln()을 사용하여 작성한다.
<body> document.write()활용 -------------------(hr태그) Welcome! 2 + 5는 7입니다. </boby>
풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document.write() 실습</title> </head> <body> <!-- <br>태그를 사용하지 않고, 덧셈의 결과는 직접 연산을 통해 출력한다. 아래의 문서를 그대로 write(), writeln()을 사용하여 작성한다. --> <!-- document.write()활용 --------------------(hr태그) Welcome! 2 + 5는 7입니다. --> </body> <script> with(document){ write("<h1>document.write() 활용</h1>"); write("<hr>"); write("<h2>Welcome!</h2>"); write("<pre>"); writeln("2 + 5는"); write(2 + 5 + "입니다."); write("</pre>"); } </script> </html>
실행결과
개발자 지망생