insertBefore() 예제
<ul id="hz"> <li>홈짱닷컴</li> <li>Homzzang.com</li> </ul> <button onclick="homzzang()">클릭</button> <script> function homzzang() { var list = document.createElement("LI"); var text = document.createTextNode("홈페이지 제작관리"); list.appendChild(text); var hz = document.getElementById("hz"); hz.insertBefore(list, hz.childNodes[0]); } </script> 결과보기
<ul id="hz">
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
</ul>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var list = document.createElement("LI");
var text = document.createTextNode("홈페이지 제작관리");
list.appendChild(text);
var hz = document.getElementById("hz");
hz.insertBefore(list, hz.childNodes[0]);
}
</script>
결과보기
주의
1. 요소 안 공백은 text로 간주되며, text는 노드로 간주됨. 2. 첫 번째 <li> 앞에 공백 존재 시, 공백이 첫 번재 노드가 됨. 즉, 공백 0 / li 1 / 홈짱~ 2 / li 3 / Hom~ 4 / 공백 5따라서, 위 예제에서 맨 마지막에 노드 추가하려면, 5가 됨. hz.childNodes[5]
1.
요소 안 공백은 text로 간주되며, text는 노드로 간주됨.
2.
첫 번째 <li> 앞에 공백 존재 시, 공백이 첫 번재 노드가 됨.
즉, 공백 0 / li 1 / 홈짱~ 2 / li 3 / Hom~ 4 / 공백 5따라서, 위 예제에서 맨 마지막에 노드 추가하려면, 5가 됨.
hz.childNodes[5]
