Javascript
<script type="text/javascript">
function btnEvent(){
card_text= document.querySelector('#card_input');
console.log(card_text.value);
cardList = document.querySelector('.list');
liElement = document.createElement('li');
liElement.innerHTML = card_text.value;
cardList.appendChild(liElement);
}
</script>
card_text = document.querySelector('#card_input');
>> 에서 card_text는 object, card_text라는 element안에 위에 input 태그 한줄을 넣었다.
>> 새로운 정의를 내린다
>> method
console.log(card_text.value);
>> console에 #card_input (card_text)의 value값을 가져와라 >> 그걸 console에서 확인하겠다
liElement = document.createElement('li');
>>여기서 liElement는 내가 임의로 지정하는 이름
>> 새로운 li element를 만들어라.
liElement.innerHTML = card_text.value;
>> 새로만든 li 안에 #card_input(card_text)의 value값을 넣어라
----------------여기까지는 화면에 출력이 안됨 콘솔에서만 확인가능
cardList.appendChild(liElement);
>> cardList (ul class="list") 아래에 liElement (card_text의 value값으로 새로만들어지는 li)를 넣어라.
그럼 이런식으로 옆에 버튼을 누르면 card_input에 적힌 글자가 list-down됨
'Lecture' 카테고리의 다른 글
3.23 - img_changing (0) | 2021.03.24 |
---|---|
3.23 - Delete Btn (0) | 2021.03.24 |
3.22 - JS (0) | 2021.03.22 |
3.22 - buttons (0) | 2021.03.22 |
3.18 - POSITION (0) | 2021.03.18 |