2020.03.22(월)
블록체인 기반 핀테크 및 응용 SW 개발자 양성과정 일곱째날_오후
오늘 자바스크립트 처음 배웠는데 굉장히 많은걸 배운 느낌이다ㅠ
머릿속에서 모든게 정립이 안된 느낌,,,
용어 정립도 하나도 안됐다ㅋㅋㅋㅋㅋㅜㅜㅜㅜ
<!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;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
#wrap{
width: 100%;
}
#header{
height: 200px;
background-color: green;
padding: 20px;
color: honeydew;
position: relative;
}
#title{
text-align: center;
}
#searching{
width: 450px;
margin: 0 auto;
margin-top: 100px;
}
.searchingBox{
width: 350px;
height: 30px;
background-color: honeydew;
border-radius: 5px;
text-align: center;
}
.searchingBtn{
display: inline-block;
width:40px;
padding: 5px;
background-color: honeydew;
}
#content{
text-align: center;
}
#content>li{
margin-top: 30px;
}
</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="글자글자" class="searchingBox"> <!--card_text-->
<input type="button" value="★" class="searchingBtn" onclick="btnEvent();">
</div>
</div>
<ul id="content">
<li>sample1</li>
<li>sample2</li>
<li>sample3</li>
</ul>
</div>
<script type="text/javascript">
function btnEvent(){
card_text = document.querySelector('#Box_input');
cardList = document.querySelector('#content');
liElement = document.createElement('li');
liElement.innerHTML = document.querySelector('#Box_input').value;
document.querySelector('#content').appendChild(liElement);
}
</script>
</body>
</html> liElement = document.createElement('li'); -> li 엘리먼트 추가생성
liElement.innerHTML = document.querySelector('#Box_input').value; -> li엘리먼트 안에 Box_input안의 내용 값 넣어줌
document.querySelector('#content').appendChild(liElement); -> <li>????</li> 꼴의 내용이 sample 3 밑에 추가로 생성
'JS' 카테고리의 다른 글
| [JS] 자바스크립트 움직이는 배너 만들기 (0) | 2021.03.29 |
|---|---|
| [JS] 자바스크립트 querySelectorAll 활용해서 이미지 바꾸기 (0) | 2021.03.24 |
| [JS] 자바스크립트 removeChild (0) | 2021.03.23 |
| [JS] 조건문(if-else), 비교문,반복문(for) (0) | 2021.03.23 |
| [JS] document, alert, console (0) | 2021.03.22 |