DOM Linking Elements : insertBefore, appendChild, replaceChild 맛보기
ITWeb/개발일반 2011. 11. 29. 10:45[[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>