JAVASCRIPT STEP 38 - ManiPulation

★ ManiPulation

• DOM 태그/속성/텍스트 조작
• innerHTML > 문제점 > 모든걸 문자열로 처리..
• 1. innerHTML을 이용한 방식

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

• 2. DOM을 이용한 방식(잘안씀)

btn1.addEventListener('click', function() {
    //2. 
    //2.1 태그 생성 createElement()
    const input = document.createElement('input'); //<input>
    console.log(input.nodeType);
    console.log(input.nodeName);

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

    const size = document.createAttribute('size'); //size=""
    size.value = '10'; //size="10"
    input.setAttributeNode(size); //<input type="text" size="10">

    //2.3 div의 자식으로 추가 appendChild()
    div1.appendChild(input);
});

• 3. DOM을 이용한 방식 - ver2(가장많이씀)

btn2.addEventListener('click', function() {

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

    input.setAttribute('type', 'text');
    input.setAttribute('size', 10);

    div1.appendChild(input);

});

• 텍스트를 추가하는 코드

btn3.addEventListener('click', function() {

    //<h1>제목입니다.</h1>
    //<p>문단입니다.</p>

    const h1 = document.createElement('h1'); //<h1></h1>

    const txt = document.createTextNode('제목입니다.');

    h1.appendChild(txt); //<h1>제목입니다.</h1>

    const p = document.createElement('p'); //<p></p>
    p.textContent = '문단입니다.'; //<p>문단입니다.</p>

    //끝에다가 추가
    div1.appendChild(h1);
    div1.appendChild(p);

    //앞에다가 추가
    div1.prepend(h1);
    div1.prepend(p);
    
    //apeendchild와 비슷
    div1.append(h1);
    div1.append(p);

});

 

■ 동적으로 테이블을 만드는 방법

btn4.addEventListener('click', function() {

    //동적으로 테이블 생성하기
    //- 5 x 5 테이블

    const table = document.createElement('table'); //<table></table>

    table.setAttribute('border', '1'); //<table border="1"></table>

    for(let i=0; i<5; i++) {

        const tr = document.createElement('tr'); //<tr></tr>

        for (let j=0; j<5; j++) {

            const td = document.createElement('td'); //<td></td>
            td.textContent = i + ',' + j;
            tr.appendChild(td);

            td.onclick = function() {
                event.target.bgColor='gold';
            };

        }

        table.appendChild(tr);

    }

    div1.appendChild(table);

});

• 실행결과

확인4를 누르면 테이블 생성