문서 객체 동적 생성
문서 객체 동적 생성(1)
HTML 에 정의 되어 있지 않은 요소 노드와 텍스트 노드를 동적 생성한다.
아래에서 요소 노드와 텍스트 노드에 대해 알아본다.
<html> <head> <title>문서 객체 동적 생성</title> </head> <body> <h1>본문 내용 동적 생성하기</h1> </body> </html>
html, head, title, body 와 같은 태그를 요소 노드라 한다
<title> 태그 사이에 '문서 객체 동적 생성' 또는 <h1> 태그 사이에 있는 '본문 내용 동적 생성하기' 를 텍스트 노드라 한다.
문서 객체를 동적 생성을 위해 아래를 참고한다.
요소 노드 생성 : createElement(tag) - html 태그를 매개변수로 넘긴다.
텍스트 노드 생성 : createTextNode(text) - html 태그 사이에 넣을 텍스트를 매개변수로 넘긴다.
html에 연동 하기
appendChild(노드) : 위에서 생성한 요소 노드와 텍스트 노드를 html 객체에 연결 한다.
사용 예
아래는 동적으로 bold 태그를 가진 텍스트를 생성한다.
<html> <head> <title>문서 객체 동적 생성</title> <script> // body에 bold 태그를 가진 텍스트가 동적 생성 됩니다. window.onload = function(){ var message = document.createElement('b'); var textNode = document.createTextNode('body의 본문 내용 입니다.'); message.appendChild(textNode); document.body.appendChild(message); }; </script> </head> <body> <h1>본문 내용 동적 생성하기</h1> </body> </html>
위 소스에는 <body>에 '본문 내용 동적 생성하기' 텍스트 외에 다른 텍스트는 없다. 하지만 화면에 모든 코드가 로딩이 되면 'body의 본문 내용 입니다.' 라는 텍스트가 출력된다.
출력
문서 객체 동적 생성(2)
문서 객체의 innerHTML 속성으로 문서 객체를 동적으로 생성한다.
innerHTML 에 요소 노드와 텍스트 노드를 함께 넣으면 된다.
사용 예
<html> <head> <title>문서 객체 동적 생성</title> <script> // body에 border 태그를 가진 텍스트 문장이 동적 생성 됩니다. window.onload = function(){ var output = '<h1>본문 내용 동적 생성하기</h1>'; output += '<b>innerHTML로 생성한 body의 본문 내용입니다.</b>'; document.body.innerHTML = output; }; </script> </head> <body> </body> </html>
출력
위와 같이 body 태그에는 아무 것도 없지만 윈도우가 로드되면 document.innerHTML 입력을 통한 문서 객체가 생성된다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] window.moveBy() window.moveTo() - window 이동하기 (0) | 2017.08.28 |
|---|---|
| [자바스크립트] Date 객체 및 D-day(디데이 날짜 및 시간 계산 (1) | 2017.08.27 |
| [자바스크립트] window.resizeTo(), window.resizeBy() - 윈도우 크기 변경 (0) | 2017.08.24 |
| [자바스크립트] window.open() 속성 및 사용법 (0) | 2017.08.23 |
| [자바스크립트] Math 객체 메소드 (0) | 2017.08.21 |
댓글