[Javascript] 요소 추가하기 (createElement, createTextNode, appendChild)

제이쿼리처럼 매우 간단하지는 않지만 자바스크립트만으로도 꽤나 괜찮은 요소 조작이 가능하다.

이를 위해 사용되는 함수도 세가지가 존재한다.

.createElement()

.createTextNode()

.appendChild()

createElement() 는 요소를 추가한다.

document.createElement('div');

그리고 이 요소안에 글자를 넣는 함수가 바로 createTextNode() 이다.

var div = document.createElement('div');
div.createTextNode('This is div');

하지만 요소를 만들기만 해서는 사용할 수 없다.

그래서 존재하는, 다른 요소에 집어넣을 수 있는 함수가 바로 appendChild() 이다.

있는 뜻 그대로 자식을 추가한다는 말이다.

var div = document.createElement('div');
div.createTextNode('This is div');
 
document.body.appendChild(div);

이 코드를 그대로 가져다 쓰면 body태그 안에 div 요소가 생성된다.