본문 바로가기
JS/JS-event

요소생성 - 노드생성 및 추가

by 임혁진 2024. 2. 5.

노드생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id = "content">

    </div>

    <div id = "inner">

    </div>

    <ul id="wrap">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <button type = "button"  id = "btn1">버튼1</button>
    <button type = "button"  id = "btn2">버튼2</button>
    <button type = "button"  id = "btn3">버튼3</button>

    
    <script>
        var btn1 = document.getElementById("btn1");
        var content = document.getElementById("content");
        var lis = document.querySelectorAll("#wrap > li");
        btn1.onclick = function(){

            content.innerHTML += "<input type='checkbox' name='inter'> 체크박스생성";

            var x = content.innerHTML;
            console.log(x);
            
            for(var i = 0 ; i < lis.length ; i++){
                console.log(lis[i]);
            }
        }
    </script>
</body>
</html>

 

버튼1을 누르면

체크박스가 하나씩 생성된다.

 

 

 

 

노드를 특정위치에 추가하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input type = "text" class = "todo" placeholder="할일">
    <button type = "button" id="btn"> 추가하기</button>

    <ul class="list">
        
    </ul>

    <script>
        var btn = document.getElementById("btn");
        var todo = document.querySelector(".todo");
        var list = document.querySelector(".list");
        index = 1;

        btn.onclick = function() {
            
            var value = index++ + ". " + todo.value; //사용자가 입력한 값
            
            //li태그 생성
            var li = document.createElement("li"); 
            var a = document.createElement("a");
            a.href = "https://www.google.com"; //a href속성에 접근

            var text = document.createTextNode(value); //문자열을 node타입으로 변환해줌


            //태그.appendChild(자식에 요소 추가)

            a.appendChild(text);
            li.appendChild(a);
            list.appendChild(li);

            todo.value="";//사용자가 입력한 input초기화
        }
        
        
        </script>

    <hr>
    
    <ul class = "example">
        <!-- 여기에 10개 한번에 넣어봄-->
    </ul>
    <button type = "button" id="btn2">10개 생성하기</button>

    <script>
        var example = document.querySelector(".example")
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            
            var value = todo.value ; //사용자 입력값

            //한번에 10개를 생성한다
            for( var i = 1 ; i <= 10 ; i++){
                var li = document.createElement("li"); // li생성
                li.innerHTML = "<a href='https://www.google.com'>" +value + "</a>";
    
                example.appendChild(li);

            }
        }

    </script>

</body>
</html>

추가를 누르면 ul 태그 아래(자식)에 추가된다. 

--appendchild 

 

 

실습

 

위의 형태로 만들어보기

 

실습코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
        }

        tr {
            height: 30px;
        }

        #head {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <button type="button" id="btn">5개 추가히기</button>
    <button type="button" id="btn2">1개 추가히기</button>

    <table id=table>
        <tr id=head>
            <td>교시</td>
            <td>훈련과목</td>
            <td>담당자</td>
            <td>훈련내용</td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>



    <script>
        var table = document.getElementById("table");
        var btn = document.getElementById("btn");
        var btn2 = document.getElementById("btn2");
        btn.onclick = function () {

            for (var i = 1; i <= 5; i++) {
                var tr = document.createElement("tr");
                for (var j = 1; j <= 4; j++) {

                    var td = document.createElement("td");
                    tr.appendChild(td);
                }

                table.appendChild(tr);
            }
        }


        btn2.onclick = function () {
            var tr = document.createElement("tr");
            for (var j = 1; j <= 4; j++) {

                var td = document.createElement("td");
                tr.appendChild(td);
            }
          
            table.appendChild(tr);

        }
    </script>
</body>

</html>

'JS > JS-event' 카테고리의 다른 글

노드 삭제  (1) 2024.02.05
BOM - timeout  (0) 2024.02.05
BOM -인터벌예제  (0) 2024.02.05
BOM (인터벌)  (0) 2024.02.05
JS 실습 - 버튼으로 css style 속성 변경하기  (0) 2024.01.29