DOM Linking Elements : insertBefore, appendChild, replaceChild 맛보기

ITWeb/개발일반 2011. 11. 29. 10:45
DOM Linking 맛보기

[[insertBefore]]
[문법]

DOMNode.insertBefore(newNode, existNode)

- newNode :  document.createElement 로 생성한 노드
- existNode : 이미 존재하고 있던 DOM 노드 


[설명]

existNode 앞으로 newNode 가 삽입 됩니다.


[예제]

// pseudo code 수준으로 작성 하고 동작하는 코드는 제일 아래 코드 참고하세요.

// Before
<body>
<div id='div1'></div>
</body> 

// Run
<script type="text/javascript">
document.body.insertBefore(div2, div1);
</script>

 // After
<body>
<div id='div2'></div>
<div id='div1'></div>
</body> 
 



[[appendChild]]
[문법]

DOMNode.appendChild(newNode)

- newNode :  document.createElement 로 생성한 노드 


[설명]

DOMNode 의 마지막 Child 노드에 newNode 를 추가합니다.


[예제]

// pseudo code 수준으로 작성 하고 동작하는 코드는 제일 아래 코드 참고하세요.

// Before

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>

</div>

</div>

// Run
var obj = document.getElementById('div2');
obj.appendChild(node);

// After 

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>
                <div id='div4'>DIV4></div> 

</div>

</div>


[[replaceChild]]
[문법]

DOMNode.replaceChild(newNode, existNode)


[설명]

DOMNode 의 Child 노드 인 existNode 를 newNode 로 바꾸게 됩니다.


[예제]

// pseudo code 수준으로 작성 하고 동작하는 코드는 제일 아래 코드 참고하세요.

// Before

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>

</div>

</div>


// Run

var obj = document.getElementById('div2');

var child = document.getElementById('div3');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

obj.replaceChild(node, child);


// After 

<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div4'>DIV4

</div>

</div>

</div 



[[샘플코드]]

<!DOCTYPE html>

<html>

<head>

<title>DOM Linking</title>

<script type="text/javascript">

function testInsertBefore(){

var obj = document.getElementById('div1');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

document.body.insertBefore(node, obj);

alert(document.body.innerHTML);

}


function testAppendChild(){

var obj = document.getElementById('div2');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

obj.appendChild(node);

alert(document.body.innerHTML);

}


function testReplaceChild(){

var obj = document.getElementById('div2');

var child = document.getElementById('div3');

var node = document.createElement('div');

node.id = 'div4';

node.innerText = 'DIV4';

obj.replaceChild(node, child);

alert(document.body.innerHTML);

}

</script>

</head>

<body marginwidth='0' marginheight='0'>


<div id='div1'>DIV1

<div id='div2'>DIV2

<div id='div3'>DIV3

</div>

</div>

</div>

<br>

<button onclick="testInsertBefore();">insertBefore</button> | <button onclick="testAppendChild();">appendChild</button> | <button onclick="testReplaceChild();">replaceChild</button>


</body>

</html>


: