[JavaScript] DOM - 동적으로 태그 생성하기

🔻동적으로 태그 생성하기🔻

1. innerHTML

• 쉽고 작성 비용이 저렴하다
• 모든 것을 문자열로 조작하기에 복잡한 작업은 무리이다.

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

2. createXXX

• 복잡하고 작성 비용이 고가이다.
• 체계적인 작업이 가능하다.

---

🔻태그 생성하기🔻

생성 순서

1. 객체를 생성한다

• createElement(nodename) :  태그 생성
• createTextNode(text) : 텍스트 생성
• createAttribute(attributename) : 속성 생성
• createComment(text) : 주석 생성

//2.1 태그 생성
var input = document.createElement('input');    //<input>

//2.2 속성 생성
var type = document.createAttribute('type');    //type=""
type.value = 'text';    //type="text"
input.setAttributeNode(type);   //<input type="text">

위 속성 생성하는 세줄을 아래 setAttribute를 이용하여 한줄로 정의할 수 있다.

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

2. 생성한 노드를 트리에 삽입한다.

• appendChild(node) : 선택한 노드의 제일 마지막에 삽입된다.

div1.appendChild(input);

---

<p> 태그 생성하기

• <p align="center">문단입니다</p> 를 DOM으로 추가한다.

div1.innerHTML += '<p align="center">문단입니다</p>';

먼저 innerHTML으로 추가한다면 위와 같이 작성하면 된다.

 

            var p = document.createElement('p');    //<p></p>
    
            p.setAttribute('align', 'center');      //<p align="center"></p>
            
            /*
            var txt = document.createTextNode('문단입니다.');   //소속이 없는 문자열
            p.appendChild(txt);     //<p align="center">문단입니다</p>
            */
           //위 두 줄을 합친 기능
            p.textContent = '문단입니다.';
    
            div1.appendChild(p);

textContent로 createTextNode와 appendChild를 한줄로 정의할 수 있다.

 

---

🔻태그 삭제하기🔻

innerHTML 는 태그별 분리가 어려워 부분적으로 삭제하기 어렵다.

div1.removeChild(div1.firstElementChild);   //첫번째 요소인 텍스트 박스 삭제
div1.removeChild(div1.lastElementChild);        //마지막 요소인 p태그 삭제

removeChild를 이용하여 원하는 요소만 찾아서 삭제한다.

---

🔻img 태그 생성 및 삭제하기🔻

innerHTML로 생성하기

            for (var i=1; i<=5; i++) {
                div1.innerHTML += '<img src="../asset/images/catty0' + i + '.png">';
            }

            for (var i=0; i<div1.children.length; i++) {
                div1.children[i].addEventListener('click', m4);
            }

 

create로 생성하기

            for (var i=1; i<=5; i++) {

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

                img.setAttribute('src', '../asset/images/catty0' + i + '.png');

                img.addEventListener('click', m4);

                div1.appendChild(img);
            }

 

선택한 이미지 삭제하기

div1.removeChild(event.target);

 

---

🔻테이블 생성하기🔻

3 X 3 테이블에 td 이벤트도 추가한다.

<style>
    .table {
        border: 1px solid gray;
        border-collapse: collapse;
    }
    .table td {
        border: 1px solid gray;
        padding: 10px 20px;
    }
</style>

<h1>DOM 조작</h1>

<input type="button" value="버튼1" id="btn1">
<input type="button" value="버튼2" id="btn2">
<input type="button" value="버튼3" id="btn3">
<input type="button" value="버튼4" id="btn4">
<hr>
<div id="div1"></div>

<script>
    document.getElementById('btn1').addEventListener('click', m1);
    document.getElementById('btn2').addEventListener('click', m2);
    document.getElementById('btn3').addEventListener('click', m3);
    document.getElementById('btn4').addEventListener('click', m4);

    var div1 = document.getElementById('div1');

    function m4() {
        //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('click', m5);
                tr.appendChild(td);
            }

            table.appendChild(tr);
        }
        table.className = 'table';

        div1.appendChild(table);
    }

    function m5() {
        event.target.bgColor = 'gold';
    }
</script>