[JS] 자바스크립트로 본문에 코드 추가하기

웹 페이지에서 사용자가 어떠한 행동을 했을 때, 본문에 원하는 콘텐츠를 추가해야 하는 경우가 있다.

이 때에는 DOM코드 중 write()와 writeln()을 이용한다.

document.write(), document.writeln() 사용하기

document.write()와 document.writeln()은 해당 html문서의 body에 html스크립트를 추가한다.

document.write("html코드");의 형태로 작성한다.

write()와 writeln()의 차이는 줄넘김이 존재하는지 여부이다.

실제 작성한 코드를 보면

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write, writeln</title>
</head>
<body>
	<h2>write, writeln 코드 테스트</h2>
	<hr>
</body>
<script>
	document.write("<span>write사용</span>");
	document.writeln("<span>writeln사용</span>");
	document.write("<span>write사용</span>");
</script>
</html>

See the Pen write, writeln by Heekng (@heekng) on CodePen.

위처럼 writeln을 작성했지만 실제 출력된 값에는 줄넘김이 적용되지 않았다.

그 이유는 writeln은 문장 내에서 /n 으로 적용되기 때문이다.

HTML에서 줄넘김은 <br>태그에서 작용하므로 실제로 코드를 writeln를 이용하면서 줄넘김을 적용하기 위해서는 <pre></pre>태그를 이용해야 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write, writeln, pre</title>
</head>
<body>
	<h2>write, writeln, pre코드 테스트</h2>
	<hr>
</body>
<script>
	document.write("<span>write사용</span>");
	document.write("<pre>")
	document.writeln("<span>writeln사용</span>");
	document.write("</pre>")
	document.write("<span>write사용</span>");
</script>
</html>

See the Pen write, writeln, pre by Heekng (@heekng) on CodePen.

<pre></pre>태그를 이용함으로써 줄넘김이 정상 적용된 것을 확인할 수 있다.

<pre>태그를 이용하면 여러 개의 공백과, 개행문자가 인식된다.

저작자표시 비영리 변경금지

'JS & TS > Javascipt' 카테고리의 다른 글

[JS] 객체, 프로토타입, property (0)	2021.02.13
[JS] 함수 function (0)	2021.02.12
[JS] 값 비교하기(==, ===) (0)	2021.02.12
[JS] 데이터타입, 변수, 상수 (0)	2021.02.12
[JS] 다이얼로그 사용하기 (0)	2021.02.11
[JS] Javascript 자바스크립트 기본 개념 (0)	2021.02.10

수학하다 개발하기

[JS] 자바스크립트로 본문에 코드 추가하기