문서 객체 동적 생성
문서 객체 동적 생성(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의 본문 내용 입니다.' 라는 텍스트가 출력된다.
출력
![[자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML()](https://t1.daumcdn.net/cfile/tistory/99877C33599D767B31 "[자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML()")
문서 객체 동적 생성(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>
출력
![[자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML()](https://t1.daumcdn.net/cfile/tistory/99314233599D792314 "[자바스크립트] 문서 객체 동적 생성 - createElement(), createTextNode(), appendChild(), innerHTML()")
위와 같이 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 |
댓글