: appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.
노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다.
아래 API는 노드를 생성하는 API이다.
엘리먼트 노드를 추가한다.
텍스트 노드를 추가한다.
<ul id="target">
<li>HTML</li>
<li>CSS</li>
</ul>
<input type="button" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
function callAppendChild(){
let target = document.getElementById('target');
let li = document.createElement('li');
let text = document.createTextNode('JavaScript');
li.appendChild(text);
target.appendChild(li);
}
function callInsertBefore(){
let target = document.getElementById('target');
let li = document.createElement('li');
let text = document.createTextNode('jQuery');
li.appendChild(text);
target.insertBefore(li, target.firstChild);
}
</script>
노드 제거
노드 제거를 위해서는 아래 API를 사용한다.
이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의하자.