JavaScript - 노드조작: 메뉴추가

노드 추가 방법

1) 텍스트 노드 생성
2) 텍스트 노드를 추가할 엘리먼트 노드 선택
3) 엘리먼트 노드에 텍스트 노드 추가하기

HTML 코드

<section id ="section6">
    <h1>Ex6 노드조작: 메뉴추가(createTextNode, Element)</h1>
    <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">
        <li><a>aaa</a></li>
        <li><a>bbb</a></li>
    </ul>
</section>
 

 

1. JS 텍스트 노드 추가하기

//Ex6 : 엘리먼트 노드의 속성 변경
window.addEventListener("load", function() {
    var section = document.querySelector("#section6");
 
    var titleInput = section.querySelector(".title-input");
    var menuListDiv = section.querySelector(".menu-list");
    var addButton = section.querySelector(".add-button");
    var delButton = section.querySelector(".del-button");
 
    addButton.onclick = function() {
         var title = titleInput.value;
         const txtNode = document.createTextNode(title);
         menuListDiv.appendChild(txtNode);   
    };
 
    delButton.onclick = function() {
        var txtNode = menuListDiv.childNodes[0];
        txtNode.remove();
    };
});
 

위와 같이 간단하게 menu-list의 자식으로 title-input에 입력한 값을 생성 해 줄 수 있다.

허나 노드를 지우게 될 때 공백또한 노드로 인식하는 문제가 발생하지만 보통 값을 넣어줄 때 <a>,<li> 등 태그로 묶어 전달하기 때문에 걱정 할 필요는 없다.

 

2. 추가하는 텍스트 노드를 태그로 묶어 추가하기

//Ex6 : 엘리먼트 노드의 속성 변경
window.addEventListener("load", function() {
    var section = document.querySelector("#section6");
 
    var titleInput = section.querySelector(".title-input");
    var menuListUl = section.querySelector(".menu-list");
    var addButton = section.querySelector(".add-button");
    var delButton = section.querySelector(".del-button");
 
    addButton.onclick = function() {
       
        var title = titleInput.value;
        var txtNode = document.createTextNode(title);
        var aNode = document.createElement("a");
        aNode.href="";
        aNode.appendChild(txtNode);
 
        var liNode = document.createElement("li");
        liNode.appendChild(aNode);
 
        menuListUl.appendChild(liNode);
    };
 
    delButton.onclick = function() {
        var liNode = menuListUl.children[0];
        menuListUl.removeChild(liNode);
    };
});
 

텍스트만 추가 할 때와는 다르게 createElement속성을 사용해 a태그와 li태그를 붙여 준 상태엣 menulListUI 자식 태그로 넣어 주었는데 innerHTML 속성를 사용해  조금더 간략한 방법을 알아보자

 

3. innerHTML 속성 사용해 조금 더 간략해지기

//Ex6 : 엘리먼트 노드의 속성 변경
window.addEventListener("load", function() {
    var section = document.querySelector("#section6");
 
    var titleInput = section.querySelector(".title-input");
    var menuListUl = section.querySelector(".menu-list");
    var addButton = section.querySelector(".add-button");
    var delButton = section.querySelector(".del-button");
 
    addButton.onclick = function() {
 
        var title = titleInput.value;
 
        var html= "<a href=''>"+title+"</a>";
        var li = document.createElement("li");
        li.innerHTML = html;
 
        // menuListUl.appendChild(li);
        // 상향된 방법
        // 여러개를 추가 할 수 있다. 인자가 가변길이이다.
        menuListUl.append(li); 
    };
 
    delButton.onclick = function() {
        var liNode = menuListUl.children[0];
        // menuListUl.removeChild(liNode);
        // 부모를 통해 지우는 방법이 아닌 나를 지워라.
        liNode.remove();
    };
});
 

3번 코드와 바뀐 부분은

addButton에서 var html 값을 li.innerHTML 속성으로 값을 받아 더 간략한 코드를 만들 수 있다.

menuListUl.appendChild(li) 에서 menuListUl.appned(li) 로 바꾸었는데 appendChild와 다르게 인자를 여러개 값을 받을 수 있고 String 값 또한 받을 수 있다.

delButton에서 menuListUl.removeChild(liNode)에서는 li로 추가한 값을 지우기 위해서는 부모 menuListUl이 필요 했는데 그렇게 하지 말고 자기 자신을 지울 수 있는 remove()속성을 사용했다.

 

결과