텍스트 노드 동적 추가/삭제

document의 text노드(객체)를 동적으로 생성하여 js 트리구조에 삽입해주는 방식

 

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>
      <div class="menu-list">
        
      </div>
    </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 textNode = document.createTextNode(title);
      menulist.appendChild(textNode);
   }

   delbutton.onclick = function(){
      var textNode = menulist.childNodes[0];
      menulist.removeChild(textNode);
   }
 });

 

추가

1.입력한 text를 title에 저장

2.title내용을 기반으로 text노드를 생성하하여 textNode에 저장

3.menulist에 자식객체로 textNode를 추가해줌

 

삭제

1.menulist의 0번째 자식노드를 textNode에 저장

2.해당 textNode 노드를 삭제