[JavaScript] DOM Elements 조작

자바 스크립트에서 DOM 요소 조작하여 클릭 시 텍스트 생성

 

document.createElement()

 

script 부분에서 메서드를 이용해 DOM에 마크업 요소를 추가할 수 있다. 이렇게 만든 요소는 따로 추가하는 작업을 거치지 않는다면 DOM에 추가되지 않고 메모리에만 존재한다. 

 

parent.appendChild(element);

 

만들어진 element는 appendChild 메서드를 통해 DOM에 추가를 해줘야 한다. 또, DOM 요소 생성 시 태그 뿐 아니라 텍스트 노드도 생성이 가능하며 마찬가지로 appendChild를 통해 부모 태그에 넣어줄 수 있다. 

 

onclick = function() {
    // 1. #h1space 변수 저장 (저장 위치)
    var click1 = document.getElementById("h1space");
    // 2. #createh1 변수로 저장 (트리거)
    var click2 = document.getElementById("createh1");
    // 3. #createh1 onclick 설정
    click2.onclick = function() {
            // 4. onclick 실행 함수 내부에서 h1 태그 생성
            var h1 = document.createElement('h1');
            h1.className += 'blue'; // 색상 변경을 위해 클래스 네임 부여
            console.log(h1);
            // 5. 생성된 h1에 text 추가로 넣기
            var text = document.createTextNode
            ("Keep it small and simple"); 
            h1.appendChild(text);
            // 6. 1번의 #h1space에 생성한 h1 자식으로 넣기
            h1space.appendChild(h1);
    }
}