[ JavaScript ] JS 노드 추가, 생성 , 제거 , 변경 API

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

- 노드 변경 API

노드 추가, 생성 , 제거 , 변경를 해주는 API를 알아보겠습니다.

 

 

 

- 노드 추가

 

 

노드의 추가와 관련된 API들은 아래와 같습니다.

 

 

• 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" onclick="callAppendChild();" value="appendChild()" />
<input type="button" onclick="callInsertBefore();" value="insertBefore()" />
<script>
    function callAppendChild(){
        var target = document.getElementById('target');
        var li = document.createElement('li');
        var text = document.createTextNode('JavaScript');
        li.appendChild(text);
        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>

 

callAppendChild 함수에서는  appendChild 를 이용해 노드를 추가해줬습니다.

 

 

callInsertBefore 함수에서는 만들어진 li 엘리먼트를 target 의 첫번째 노드 앞에 추가하는 식으로 동작했습니다.

 

따라서 두 함수를 모두 실행 시킨 결과는 아래 그림과 같습니다.

 

 

 

 

 

 

 

 

- 노드 제거

 

노드 제거를 위해서는 아래 API를 사용합니다.

 

이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점에 유의합시다.

 

 

 

• removeChild(child)

 

 

- 노드 제거 예제

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callRemoveChild();" value="removeChild()" />
<script>
    function callRemoveChild(){
        var target = document.getElementById('target');
        target.parentNode.removeChild(target);
    }
</script>

 

 

callRemoveChild 함수에서 target.parentNode.removeChild() 를 한 것은

 

 

target 의 부모노드에서 removeChild() 를 해줘야합니다.

 

 

위의 코드를 실행시킨 결과는 아래와 같습니다.

 

 

 

 

 

- 노드 변경

 

 

노드 바꾸기에는 아래 API가 사용됩니다.

 

 

• replaceChild(newChild, oldChild)

 

 

예제로 살펴봅시다.

 

 

- 노드 변경 예제

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li id="target">JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild();" value="replaceChild()" />
<script>
    function callReplaceChild(){
        var a = document.createElement('a');
        a.setAttribute('href', 'http://opentutorials.org/module/904/6701');
        a.appendChild(document.createTextNode('Web browser JavaScript'));
 
        var target = document.getElementById('target');
        target.replaceChild(a,target.firstChild);
    }
</script>

 

 

새로 교체될 a 노드를 만들고, 이를 replaceChild 를 이용해 변경해줍니다.

 

 

 

실행한 결과는 아래와 같습니다.

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.