Node 객체 : 변경 API

변경 API

* 노드를 추가 / 제거 / 변경하는 API

1. 노드 추가

* 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이는 document 객체의 기능이다.

- 종류

* appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가

* insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 

이것 앞에 엘리먼트가 추가된다.

- document 노드 API

* document.createElement(tagname) : 엘리먼트 노드를 추가한다.

* document.createTextNode(data) : 텍스트 노드를 추가한다. 

<ul id="target">
    <li>HTML</li>
    <li>CSS</li>
</ul>
<input type="button" value="appendChild" onclick="callAppendChild();"  />    
<input type="button" value="insertBefore" onclick="callInsertBefore();"  />
<script>

//마지막에 JavaScript 리스트 추가하는 함수
    function callAppendChild(){
        var target = document.getElementById('target');    //ul 엘리먼트를 찾아 변수에 담음
        var li = document.createElement('li');    //List 엘리먼트 생성 <li> ... </li>
        var text = document.createTextNode('JavaScript');    //JavaScript라는 텍스트 노드 생성
        li.appendChild(text);    //JavaScript라는 텍스트가 li의 자식이 된다 . <li> JavaScript ( 이렇게 들어옴) </li>
        target.appendChild(li);    //엘리먼트 추가
    }
 
    function callInsertBefore(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('jQuery');
        li.appendChild(text);
        target.insertBefore(li, target.firstChild);
    }
</script>

- 결과

• HTML
• CSS

2. 노드 제거

* 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다. 

- 종류

* removeChild(child) : 노드 제거

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" value="removeChild()" onclick="callRemoveChild();"  />
<script>
    function callRemoveChild(){
        var target = document.getElementById('target');
        target.parentNode.removeChild(target);    // 부모 노드 실행 후 노드 삭제
    }
</script>

- 결과

• HTML
• CSS
• JavaScript

3. 노드 변경

- 종류

* replaceChild(newChild, oldChild)

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" value="replaceChild" onclick="callReplaceChild();"  />
<script>
    function callReplaceChild(){
        var a = document.createElement('a');    //a 태그 생성 <a> ... </a>
        a.setAttribute('href', 'http://bravesuccess.tistory.com/');    //속성 추가 <a href="http://bravesuccess.tistory.com/">..</a>
        a.appendChild(document.createTextNode('My Study Blog'));  // <a href="http://bravesuccess.tistory.com/"> My Study Blog </a>
 
        var target = document.getElementById('target');
        target.replaceChild(a,target.firstChild);    //해당 노드를 변경
    }
</script>

- 결과

• HTML
• CSS
• JavaScript