[DOM_Element] JS - insertBefore() 메서드 - 기존자식노드 앞에 새 자식노드 삽입

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>

 

결과보기

주의

 

1.

요소 안 공백은 text로 간주되며, text는 노드로 간주됨.

 

2.

첫 번째 <li> 앞에 공백 존재 시, 공백이 첫 번재 노드가 됨.

즉, 공백 0 / li 1 / 홈짱~ 2 / li 3 / Hom~ 4 / 공백 5
따라서, 위 예제에서 맨 마지막에 노드 추가하려면, 5가 됨.

hz.childNodes[5]