개발/JavaScript

JavaScript - 태그를 동적으로 만들어서 특정 엘리먼트에 추가하기(createElement, createTextNode, appendChild)

뉴에이스 2018. 12. 4. 13:58 
<div>테스트</div> 태그를 동적으로 만들어서 특정 엘리먼트에 추가하기

1. div 엘리먼트 만들기
    document.createElement(태그명)
    var divEle = document.createElement("div");
    메모리에 <div></div> 생성된 상태임...

2. 테스트 텍스트 노드 만들기
    document.createTextNode(내용)
    var txt = document.createTextNode("test");

3. 생성된 div 엘리먼트의 자식으로 텍스트 노드를 추가하기
    부모.appendChild(자식)
    divEle.appendChild(txt)
    메모리에 <div>test</div>

4. 아이디가 "list"인 엘리먼트에 생성된 div를 추가하자
    var divList = document.querySelector("#list") // 아이디가 "list"인 엘리먼트
    divList.appendChild(divEle)
 
소스

 

<body>
    <button onclick="doAdd();">추가</button>
    <div id="list"></div>
    
    <script>
        var count = 1;
        function doAdd () {
            var list = document.querySelector("#list");
            // 방법2 - innerHTML (통째로 변경되는 개념)
            list.innerHTML += "<h2>추가" + count++ + "</h2>";
            /* 방법1 0 appendChild (끝부분만 추가)
            var h2 = document.createElement("h2"); // <h2></h2>
            var txt = document.createTextNode("추가" + count++); // 추가1, (추가2로 변경)
            h2.appendChild(txt) // <h2>추가1</h2>
            list.appendChild(h2); // id가 list인부분에..추가
            */
        }
    </script>
</body>
결과

 

저작자표시 비영리 변경금지 (새창열림)