2020.03.23(화)
블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 여덟째날
어제는 creatElement와 appendChild를 사용하여 html 요소를 추가해보았다. 그래서 오늘은 삭제하는 것을 배워보았다.
(대문자 소문자 구분해서 쓰는 것이 중요중요! 안그러면 작동 안할 수 있음!!!!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
#header{
height: 200px;
background-color: blueviolet;
}
#title{
text-align: center;
color: chartreuse;
}
#searching{
text-align: center;
margin-top: 100px;
}
#box_input{
width: 300px;
height: 30px;
}
#content{
text-align: center;
margin-top: 20px;
}
#content>li{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="title">
<h1>To do list</h1>
</div>
<div id="searching">
<input type="text" id="box_input" placeholder="글자를 입력해주세요">
<input type="button" value="★" onclick="btnEvent();">
</div>
</div>
<ul id="content">
<li>content1</li>
<li>content2</li>
<li>content3</li>
</ul>
</div>
<script type="text/javascript">
function btnEvent(){
box_input = document.querySelector('#box_input');
content = document.querySelector('#content');
li = document.createElement('li');
li.innerHTML = box_input.value;
delBtn = document.createElement('button');
delBtn.innerHTML = 'X';
delBtn.onclick = function(){
content.removeChild(this.parentNode);
}
content.appendChild(li);
li.appendChild(delBtn);
}
</script>
</body>
</html>
box_input = document.querySelector('#box_input');
-> input box 아이디 값을 받아서 변수에 담았다.
content = document.querySelector('#content');
-> 내용 출력하는 영역 설정
li = document.createElement('li');
-> 내용 출력하는 최소단위 엘리먼트
li.innerHTML = box_input.value;
-> li안에 내용을 넣기 위해서 : box_input에 있는 내용을 넣기 위해
delBtn = document.createElement('button');
-> li안에 버튼을 넣기 위해 <button></button>만 생성함
delBtn.innerHTML = 'X';
-> 버튼 안에 내용을 넣기 위해 <button>X</button>
delBtn.onclick = function(){
content.removeChild(this.parentNode);
}
-> content = 내용을 출력한 영역 설정 부분이다.
removeChild() = 메서드 안에 있는 값을 노드제거
this.parentNode = this 개념 이해
parentNode 나의 부모엘리먼트
this가 가르키는 것은 X박스!!!
X박스의 부모는 li 엘리먼트결국 콘텐트 안의 해당 X박스의 엘리먼트를 remove 됨
li.appendChild(delBtn);
-> li엘리먼트 안에 여태동안 만들었던 delBtn을 넣는다
<li><button>X</button></li>
content.appendChild(li);
-> content 안에 li를 넣어서 완벽하게 만든다
* 결과물 영상
'JS' 카테고리의 다른 글
| [JS] 자바스크립트 움직이는 배너 만들기 (0) | 2021.03.29 |
|---|---|
| [JS] 자바스크립트 querySelectorAll 활용해서 이미지 바꾸기 (0) | 2021.03.24 |
| [JS] 자바스크립트 html 요소 추가하기 (createElement, appendChild) (0) | 2021.03.23 |
| [JS] 조건문(if-else), 비교문,반복문(for) (0) | 2021.03.23 |
| [JS] document, alert, console (0) | 2021.03.22 |