[자바스크립트] js로 노드요소 생성 및 제거하기, 게시판 만들기

실제 노드요소 접근은 jQuery등 다른 Lib을 사용해 접근하는 것이 편하다.

여기선 js기본문법을 통해서만 요소 접근 삭제 생성을 한다.

참가자의 이름을 적고 신청버튼을 누르면 명단에 이름이 작성이 되고,

옆에 x표시를 누르면 이름이 삭제가 되는 페이지를 작성하고자 한다.

html코드는 위와 같다. 이름입력을 받는 input태그와

누르면 newRegister함수가 호출되도록 하는 버튼태그를 만들고

nameList라는 이름의 참가자 명단을 출력하는 div태그를 만들었다.

 

신청버튼 클릭시 이름입력 - createElement, querySelector, createTextNode, appendChild

버튼 클릭시 호출되는 newRegister함수다.

newP는 createElement로 p태그를 만들어준다.

userName은 querySelector로 userName아이디를 가지고 있던 input태그를 지정한다.

newText는 참가자의 이름이 적힌 input태그의 .value 값을 가져와 createTextNode로 텍스트노드를 만들어주고,

newP로 만들어진 p태그에 appendChild로 하위태그로 newText를 붙이게 된다.

input태그에 입력된 텍스트가 newText로 텍스트노드로 만들어지고 newP로 만들어진 p태그 아래에 하위태그로 

생성되었다.

 

신청버튼 클릭시 삭제요소 생성 - setAttribute

이름을 입력받았다면 옆에 삭제버튼도 만들어준다.

delBtn은 span태그를 생성한다.

delText는 X라는 텍스트노드를 생성한다.

delBtn으로 생성된 span태그는 setAttribute로 class값으로 del을 가진다. <span class='del'>

delText로 만들어진 X텍스트노드는 delBtn으로 만들어진 span태그의 하위로 추가된다.

위에 만들어진 p태그에 delBtn으로 만들어진 span태그가 하위로 추가된다.

입력된 이름을 받는 p 태그안에

참가자2 텍스트노드와

del클래스를 가지는 span태그가 속해있고

x 텍스트노드가 span태그안에 있는 것을 확인 가능하다.

 

버튼클릭 시 명단리스트에 등록 - insertBefore

요소추가가 끝났다면 추가될 요소들이 어떻게 추가될 것인지에 대해 정해준다.

nameList에 id를 nameList로 가지는 div태그를 지정한다.

nameList에 insertBefore로 p태그를 리스트의 하위노드 첫번째 위치에 추가한다.

이후 input입력창의 값은 다시 비워준다.

참가자 1이 먼저 입력되고 나중에 입력된 참가자 2가 제일 위에 추가된다.

 

삭제 버튼 클릭시 이벤트 등록 - querySelectorAll, addEventListener, removeChild

마지막으로 삭제기능을 구현한다.

앞서 delBtn으로 만들어진 span태그엔 class속성값이 del로 생성되었는데

removeBtns에 del클래스를 가진 모든 태그를 지정하여 리스트로 만들어준다.

이후 for문으로 리스트의 길이만큼 반복순회하여

각 removeBtns리스트의 요소마다 click시 이벤트를 등록한다.

if문의 this는 현재 del클래스요소를 가지는 span태그이므로 상위태그인 p의 상위태그인 nameList로 접근하기 위해 

parentNode를 두번 사용하여 nameList의 id를 가지는 div태그에 접근하여

removeChild를 이용해 하위 태그를 삭제하는데 this가 가르키는 span태그의 바로 상위태그인

p태그를 삭제해준다.

nameList는 span태그의 두 단계 상위태그, p는 한 단계 상위태그

 

결과 및 css코드

input태그에 입력된 value

 

버튼 클릭시 p태그와 텍스트값, span태그 생성

 

 

삭제 이벤트 실행 전

삭제 이벤트 실행 후

.css

#container{
    width: 500px;
    margin: 20px auto;
}
h1{
    font-size: 2.5em;
    text-align: center;
}
form{
    margin-top: 55px;
}
input[type='text']{
    float: left;
    width: 300px;
    padding: 12px;
    border: none;
    border-bottom: 1px solid gray;
    font-size: 20px;
}
input:focus{
    outline: none;
}
button{
    width: 100px;
    border: 1px solid gray;
    padding: 10px;
    margin-left: 30px;
    font-size: 20px;
}
button:hover{
    background-color: yellowgreen;
}
hr{
    clear: both;
    visibility: hidden;
}
#nameList p{
    font-size: 20px;
    text-indent: 50px;
    line-height: 1.5;
}
.del{
    font-size: 20px;
    text-align: center;
    color: blue;
    background: transparent;
    float: right;
    margin-right: 10px;
}
.del:hover{
    color: rebeccapurple;
    cursor: pointer;
}