[Javascript] DOM에서 노드 추가하기

* 요소 노드 만들기 - createElement() 메서드

DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것이다.

이 때 사용하는 메서드는 createElement()인데 괄호 안에 해당하는 요소 노드를 만들면 된다.

- 기본형 : document.createElement(노드명)

var newP = document.createElement("p"); // p 요소 노드 만들기

하지만 createElement() 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다.

이제 <p> 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다.

 

* 텍스트 노드 만들기 - createTextNode() 메서드

새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다.

텍스트 노드를 만드는 메서드는 createTextNode() 이고 다음과 같은 형식으로 사용한다.

- 기본형 : document.createTextNode(텍스트);

var txtNode = document.createTextNode("DOM은 document object model의 줄임말입니다.");
// p 요소의 텍스트 노드 만들기

 

* 자식 노드 연결하기 - appendChild() 메서드

appendChild() 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용한다.

이 때 appendChild() 메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가된다.

- 기본형 : 부모노드.appendChild(자식노드)

newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);

 

* 전체 코드 소스 완성하기

(...생략...)
<div>
	<h1>DOM을 공부합시다</h1>
    <a href="#" onclick="addP(); this.onclick='';">더 보기</a> 
    <div id="info"></div>
</div>

<script>
    function addP() {
      var newP = document.createElement("p");
      var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말입니다.");
      newP.appendChild(txtNode);
      document.getElementById("info").appendChild(newP);
    }
</script>

링크를 클릭하면 addP() 함수가 한 번만 실행되도록 한다.

해당 코드를 실행하여 브라우저 창으로 결과를 출력하면

잘 실행되는 것을 확인할 수 있다.