Hacosa js study 5th

634 views
551 views

Published on

하코사 자바스크립트 스터디 5주차

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
634
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hacosa js study 5th

  1. 1. HACOSA JS STUDY#7 Creating MarkUp On The Fly
  2. 2. document.write• 문서 내에 문자열을 추가하는 가장 빠르고 쉬운 방법• HTML 문서에서 문제없이 동작은 하나, 좋은 방법은 아니다. ‒ 문서 구조, 내용을 만들기 위해 document.write를 사용하는 것은 글 꼴의 크기와 색상을 지정하기 위해 <font>를 사용하는 것과 마찬가 지.
  3. 3. innerHTML• IE4에서 처음 소개한 프로퍼티로 현재는 대부분의 웹 브라 우저들이 지원• DOM 표준안에는 포함되어 있지 않다.
  4. 4. DOM Method• createElement ‒ 요소를 생성하는 메소드 ‒ document.createElement(nodeName) ‒ 요소를 만들기만 할 뿐 문서에 추가하는 것은 아님• appendChild ‒ 자식 노드를 추가하는 메소드 ‒ var para = document.createElement(“p”); testDiv.appendChild(para);
  5. 5. DOM Method• createTextNode ‒ 텍스트 노드 생성 메소드 window.onload = function(){ var para = document.createElement(“p”); var testDiv = document.getElementById(“testDiv”); testDiv.appendChild(para); var txt = document.createTextNode(“Hellow word”); para.appendChild(txt); }
  6. 6. DOM Method• insertBefore ‒ 기존에 존재하는 요소 앞에 새 요소를 생성하는 메소드 ‒ parentNode.insertBefore(newElement, targetElement) → newElement 를 targetElement 앞에 생성 ‒ Gallery.parentNode.insertBefore(placeholder, gallery) → placeholder 객체를 gallery 객체 앞에 생성 →Before : <body> <div id=“gallery”>~~~~</div> </body> →After : <body> <div id=“placeholder”></div> <div id=“gallery”>~~~~</div> </body>
  7. 7. DOM Method• insertAfter ‒ 존재하지 않는 DOM Method ‒ 사용자 정의 메소드로 사용 가능 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if(parentNode.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement, targetElement.nextSibling); } } →parentNode : 부모 노드 →lastChild : 자식 노드 중 마지막 노드 →nextSibling : 형제 노드 중 바로 다음에 위치하는 노드 ‒ TestURL : http://mulder21c.woobi.co.kr/lab/hacosa5th
  8. 8. END

×