엘리먼트 노드 추가/삭제

html

<section id="section6">
      <div>
        <input class="title-input" name="title"/>
        <input type="button" class="add-button" value="추가"/>
        <input type="button" class="del-button" value="삭제"/>
      </div>
      <ul class="menu-list">
        
      </ul>
    </section>

 

js

window.addEventListener("load", function(){
   var section = document.querySelector("#section6");
   var titleinput = section.querySelector(".title-input");
   var addbutton = section.querySelector(".add-button");
   var delbutton = section.querySelector(".del-button");
   var menulist = section.querySelector(".menu-list");

   addbutton.onclick = function(){
   
      var title = titleinput.value;
      var html = '<a href="">' + title + '</a>';
      var li = document.createElement("li");
      li.innerHTML = html;

      menulist.append(li);
   }

   delbutton.onclick = function(){
      var liNode = menulist.children[0];
      liNode.remove();
      
   }
 });

추가

1.입력받은 text값 앞 뒤로 태그들을 문자열로 추가시킨후 그 데이터를 li 태그 내부로 넣어줍니다.

2.li태그를 menulist에 계속 추가해줍니다.

 

삭제

1.menulist의 0번 데이터를 계속 순차적으로 삭제해줍니다.