객체명.insertBefore(newChild,refChild)
객체명.replaceChild(newChild,oldChild)
객체명.removeChild(oldChild)
객체명.appendChild(newChild)
====================================================================================================
(1)객체명.appendChild(newChild)
<html>
<head>
<script>
window.onload=function(){
document.getElementById("b").onclick=function(){
var newChild=document.createElement("li");
newChild.innerHTML="cc";
var olNode=document.getElementById("olNode");
olNode.appendChild(newChild);
}
}
</script>
</head>
<body>
<ol id="olNode">
<li>aa</li>
<li>bb</li>
</ol>
<input type="button" id="b">
</body>
</html>
====================================================================================================
객체명.removeChild(oldChild)
<html>
<head>
<script>
window.onload=function(){
document.getElementById("b").onclick=function(){
var olNode=document.getElementById("olNode");
olNode.removeChild(c);
}
}
</script>
</head>
<body>
<ol id="olNode">
<li>aa</li>
<li>bb</li>
<li id="c">cc</li>
</ol>
<input type="button" id="b">
</body>
</html>
====================================================================================================
# 객체명.insertBefore(newChild,refChild)
refChild 이전에 newChild를 집어 넣어라~
<html>
<head>
<script>
function a(){
var newChild=document.createElement("li");
newChild.innerHTML="cc";
olNode.insertBefore(newChild,refChild);
}
</script>
</head>
<body>
<ol id="olNode">
<li>aa</li>
<li>bb</li>
<li id="refChild">dd</li>
</ol>
<input type="button" id="b" onclick="a()">
</body>
</html>
====================================================================================================
# 객체명.replaceChild(newChild,oldChild)
<html>
<head>
<script>
function a(){
var newChild=document.createElement("li");
newChild.innerHTML="cc";
olNode.replaceChild(newChild,oldChild);
}
</script>
</head>
<body>
<ol id="olNode">
<li>aa</li>
<li>bb</li>
<li id="oldChild">dd</li>
</ol>
<input type="button" onclick="a()">
</body>
</html>
====================================================================================================
# 객체명.parentNode
객체명.childNodes
객체명.previousSibling
객체명.nextSibling
<html>
<head>
<style type="text/css">
td { border : 1 solid navy; }
</style>
<script>
function a(){
obj1.nextSibling.style.backgroundColor="red";
obj1.previousSibling.style.backgroundColor="pink";
obj2.parentNode.style.backgroundColor="gray";
obj3.childNodes[0].style.backgroundColor="gold";
obj4.innerHTML=obj3.tagName;
}
</script>
</head>
<body onload="a()">
<table>
<tr><td>1</td><td id="obj1">2</td><td>3</td></tr>
<tr><td id="obj2">4</td><td>5</td><td>6</td></tr>
<tr id="obj3"><td>7</td><td>8</td><td id="obj4">9</td></tr>
</table>
</body>
</html>
빨간색으로 표시된 부분과 그림을 비교해 가면서 확인하면 쉽게 이해 할 수 있다.
'javascript' 카테고리의 다른 글
| 자바스크립트 (0) | 2013.10.24 |
|---|---|
| <a>문서연결,문서내연결,상자위치 지정,이벤트 처리방식,String객체 (0) | 2013.10.22 |
| innerText,innerHTML의 차이점? (0) | 2013.10.20 |
| insertAdjacentHTML 은 어디에 사용될까? (0) | 2013.10.20 |
| innerHTML을 활용한 테이블 생성하기 (0) | 2013.10.19 |