Your SlideShare is downloading. ×
Hacosa js study 5th
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hacosa js study 5th

445
views

Published on

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

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

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
445
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HACOSA JS STUDY#7 Creating MarkUp On The Fly
  • 2. document.write• 문서 내에 문자열을 추가하는 가장 빠르고 쉬운 방법• HTML 문서에서 문제없이 동작은 하나, 좋은 방법은 아니다. ‒ 문서 구조, 내용을 만들기 위해 document.write를 사용하는 것은 글 꼴의 크기와 색상을 지정하기 위해 <font>를 사용하는 것과 마찬가 지.
  • 3. innerHTML• IE4에서 처음 소개한 프로퍼티로 현재는 대부분의 웹 브라 우저들이 지원• DOM 표준안에는 포함되어 있지 않다.
  • 4. DOM Method• createElement ‒ 요소를 생성하는 메소드 ‒ document.createElement(nodeName) ‒ 요소를 만들기만 할 뿐 문서에 추가하는 것은 아님• appendChild ‒ 자식 노드를 추가하는 메소드 ‒ var para = document.createElement(“p”); testDiv.appendChild(para);
  • 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. 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. 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. END

×