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

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (20)

Similar to Hacosa js study 5th

Similar to Hacosa js study 5th (13)

More from Seong Bong Ji

More from Seong Bong Ji (6)

Hacosa js study 5th