JS | 노드 생성, 추가

노드 생성, 추가

함수	설명
createElement()	요소를 생성
createTextNode() //몰라도됨 innerHTML로 대체	텍스트를 생성
appendChild()	요소를 부모 자식 관계로 넣어줌
innerHTML=	요소를 html방식으로 생성
insertBefore(삽입노드 , 기준노드)	기준노드 앞에 삽입노드 추가

 

버튼을 누르면 아래 태그 생성 링크가 나옴

 

<!--innerHTML-->
<div class="inner1"> </div>
<button class="btn">태그 생성</button>

<script>
        
   var inner1 = document.querySelector(".inner1");
   var btn = document.querySelector(".btn");
   btn.onclick = function(){
      //문자열의 형태로 태그를 자식으로 넣는다.
      inner1.innerHTML = "<div><a href='#'>태그 생성</a></div>"
   }
   </script>

버튼을 누르면 위에 check box 생성

  <div class="inner2">
        <!-- <input type="checkbox" name="add" value="1">1
        <input type="checkbox" name="add" value="2">2
        <input type="checkbox" name="add" value="3">3
        <input type="checkbox" name="add" value="4">4
        <input type="checkbox" name="add" value="5">5 -->

    </div>
    <button class="btn2">태그 생성</button>


    <script>
        var inner1 = document.querySelector(".inner2");
        var btn2 = document.querySelector(".btn2");
        
        btn2.onclick = function(){
            var str = '';
            for(var i = 1; i <= 5; i++){
                str += '<input type="checkbox" name="add" value="'+i+'">'+i;
            }
            inner1.innerHTML = str;
            console.log(str);
        }
    </script>

할 일을 입력하고 추가버튼을 누르면 아래에 입력한 할 일을 추가

<h3> > To Do List</h3>

    <input type="text" name="" class="todo" placeholder="할일을 작성해보세요">
    <button class="btn">추가</button>

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

    <script>
        var todo = document.querySelector(".todo"); //input 태그
        var list = document.querySelector(".list"); //ul 태그
        var btn = document.querySelector(".btn"); //
        
        btn.onclick = function(){

            var li = document.createElement("li");//순수 li 태그 생성(문자열 아님)
            
            var a = document.createElement("a");//a태그 생성
            a.href = "#";
            a.innerHTML = todo.value;
            todo.value = ""; //초기화

            li.appendChild(a); //li의 자식으로 a를 넣는다
            list.appendChild(li); //list의 자식으로 li를 넣는다.
            //innerHTML로 하면 자식으로 넣는것이 아니라 기존 html값을 통째로 다 갈아엎어버림
        }
    </script>

버튼을 누르면 기존 10개 리스트에서 아래 리스트가 추가됨

 

  <button id = "add">추가</button>

    <div id = "addList">
        
    </div>

    <script>
        
        //화면이 다 만들어지고(load 완료) 마지막에 넣어줄거라서 사용        
        window.onload = function(){
            
            var addList = document.getElementById("addList"); 
            var ul = document.createElement("ul"); //ul 생성
            for(var i = 1; i <= 10; i++){
                
                var li = document.createElement("li");
                li.innerHTML = "List " + i;

                ul.appendChild(li);

            }
            addList.appendChild(ul);
        }

        //
        var add = document.getElementById("add");
        add.onclick = function() {

            var li = document.createElement("li");
            li.innerHTML = "추가된 리스트";
            
            //새롭게 addList > ui 태그를 얻음
            document.querySelector("#addList > ul").appendChild(li);
        }

    </script>

1개 버튼을 누르면 1개의 행 추가, 5개 버튼 누르면 5개의 행 추가

 <h3>중앙유치원</h3>
    <h3>* 수업 내용 작성하기</h3>

    <button type="button" id="addLists">+ 5개</button>
    <button type="button" id="addList">+ 1개</button>
    <br>
    <br>

    <table>
        <thead>
            <tr>
                <th>교시</th>
                <th>수업 과목</th>
                <th>담당자</th>
                <th>수업 내용</th>
            </tr>
        </thead>
        <tbody class="todoList">
            <tr>
                <td><input type="text" size="3"></td>
                <td><input type="text"></td>
                <td><input type="text" size="5"></td>
                <td><input type="text"></td>
            </tr>
        </tbody>

    </table>

    <script>

        var todoList = document.querySelector(".todoList");
        var btn5 = document.getElementById("addLists");
        var btn = document.getElementById("addList");
        var str = "";

        btn.onclick = function () {
            //tr은 1개, td는 4개
            createTag();
        };

        btn5.onclick = function () {
            //tr은 1개, td는 4개
            for(var i =1; i<=5; i++){
                createTag();
            }
        };

        function createTag(){
            var tr = document.createElement("tr");

            tr.innerHTML = '<td><input type="text" size="3"></td>' +
                '<td><input type="text"></td>' +
                '<td><input type="text" size="5"></td>' +
                '<td><input type="text"></td>';

            todoList.appendChild(tr);
        }
    </script>