Hacosa js study 5th

HACOSA JS STUDY
#7 Creating MarkUp On The Fly

document.write
• 문서 내에 문자열을 추가하는 가장 빠르고 쉬운 방법
• HTML 문서에서 문제없이 동작은 하나, 좋은 방법은 아니
다.
‒ 문서 구조, 내용을 만들기 위해 document.write를 사용하는 것은 글
꼴의 크기와 색상을 지정하기 위해 <font>를 사용하는 것과 마찬가
지.

innerHTML
• IE4에서 처음 소개한 프로퍼티로 현재는 대부분의 웹 브라
우저들이 지원
• DOM 표준안에는 포함되어 있지 않다.

DOM Method
• createElement
‒ 요소를 생성하는 메소드
‒ document.createElement(nodeName)
‒ 요소를 만들기만 할 뿐 문서에 추가하는 것은 아님

• appendChild
‒ 자식 노드를 추가하는 메소드
‒ var para = document.createElement(“p”);
testDiv.appendChild(para);

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);
}

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>

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

Hacosa js study 5th

More Related Content

What's hot

Viewers also liked

Similar to Hacosa js study 5th

More from Seong Bong Ji

Hacosa js study 5th