개발/JavaScript

JavaScript - 엘리먼트의 값 추가, 삭제(innerHTML, remove)

뉴에이스 2020. 6. 3. 17:21

소스

 

<body>
    <button onclick="doAdd();">추가</button>
    <button onclick="doDel();">삭제</button>
    <div id="list"></div>

    <script>
        function doAdd() {
            var list = document.querySelector("#list");
            list.innerHTML += "<h1>테스트</h1>";

            // dom 방식은 create 사용
        }

        function doDel() {
            var h1 = document.querySelector("h1"); // 제일 처음 찾은 h1 하나를 가져옴
            //h1.remove();
            //h1.parentNode.remove(); // h1의 부모인 div를 삭제
            h1.parentNode.innerHTML = ""; // h1 태그안의 내용을 삭제
        }
    </script>
</body>

 

결과

 

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