Element.appendChild()

보통 appendChild()라는 method를 사용할때는
특정 Element를 동적으로 생성시키거나 이동시킬때 사용하는 경우가 많다.
개인적으로는 상품이나 뉴스의 롤링영역에 많이 사용하는 편이다.
이런 부분에 사용하기 좋은 특징이 있어서라고나 할까..

appendChild() 라는 method를 그대로 해석하자면 자식을 추가한다는 것이다.
뭐, 부모노드에 자식노드를 추가한다는 의미로 해석하면 된다.
어떤 event가 발생했을 때 자식을 추가하면 되는데... appendChild의 중요한 성질이 있다.
자식을 추가하긴 하는데, 이미 있는 자식을 또 추가할수는 없지 않은가?
그래서 이미 존재하는 자식노드를 추가하려고 하면 그 녀석을 지우고, 새로 같은 녀석을 맨 뒤에 추가해준다.
Deleting & Append 인데.. 사실 화면상 보이기로는 Move와 같아 보인다.
그래서 뉴스리스트일 경우, 이전을 누르면 제일 위에 있는 목록을 맨 뒤로 보낼때 자주 사용하는 유용한 기능이다.

간단한 사용방법은 이러하다. <ul id="test"> <li>News List 1</li> <li>News List 2</li> <li>News List 3</li> <li>News List 4</li> <li>News List 5</li> </ul> <a href="#" onclick="chgNews();return false;">Prev</a> <script type="text/javascript"> <!-- function chgNews() { var newsBox = document.getElementById("test"); var newsList = newsBox.getElementsByTagName("li"); newsBox.appendChild(newsList[0]); } //--> </script>