[JavaScript] Dom Manipulation(동적 태그 생성)

Dom Manipulation(동적으로 태그 생성하기)

첫번째 방법으론 innerHTML 이 있다.

 

div1.innerHTML = '<input type="text" size="50">';

 

 

두번째 방법은 태그를 직접 조작한다.

 

(1) 태그 생성

var input = document.createElement('input');

 

document 객체에 createElement를 선택한다. 이 메소드는 <input>태그 (객체 하나)를 반환한다.

 

(2) 속성 추가

 

//input.type = 'text';
//input.size = '50'; //BOM 타입!

var type = document.createAttribute('type'); //type=""
type.value = 'text'; //type="text"

input.setAttributeNode(type); //<input type="text">

 

DOM을 사용해서 체계적으로 태그 만들기

 

input.setAttribute('type', 'text');
input.setAttribute('size', 50); //<input type="text" size="50">

div1.appendChild(input); // input을 div의 자식으로

 

장기간에 지속적으로 관리하기 위해선 innerHTML을 사용하는 것은 좋은 방법은 아니다.

속성과 값을 알아보기도 어렵고 다루기가 어렵기 때문이다. 

 

 

예시

3 x 3 테이블을 td 이벤트로 만들기

var table = document.createElement('table');
for(var i=0; i<3; i++) {
	var tr = document.createElement('tr');
    for(var j=0; j<3; j++) {
    	var td = document.createElement('td');
        td.textContent = 'item';
        td.addEventListener('mouseenter', f3);
        td.addEventListener('mouseleave', f4);
        tr.appendChild(td);
    }
    table.appendChild(tr);
}    
table.classList.add('table');
div1.appendChild(table);

 

만든 테이블

appendchild 때문에 만들어둔 버튼을 클릭할 때 마다 테이블이 늘어난다.

늘어난 테이블