Day30 : createElement / appendChild

onkeydown 

• <input>의 속성 중 하
• 해당하는 태그 영역 내에서 키보드 버튼이 눌렸을 때 동작한다.

 

 

input 에 내용을 입력하고 엔터키를 누르면 리스트에 추가되도록 하고 싶다.

input 에서 엔터키를 어떻게 구분하도록 할까?

 

window

• 전역 객체
• 최상위에 가장 높은 공간에 존재
• event 속성을 체크할 수 있다

*event : 이 페이지에 벌어지고 있는 어떠한 이벤트를 모두 체크할 수 있다.

 

'A'를 input에 입력한 뒤 event를 체크해보자

'A'의 아스키코드가 keyCode에 들어가는 것을 알 수 있다.

 

이를 통해 엔터키의 keyCode(13)가 나오는 경우 리스트에 추가되도록 하는 조건문을 걸면 된다.

 

input에 들어온 값을 리스트에 추가하려면

js로 html 태그 <li>를 생성해야한다는 말이다.

 

▶ 태그 생성하는 방법 : createElement

() 안에 생성하고 싶은 태그 이름을 적는다.

 

 

input에 할 일을 입력하면 엔터 눌렀을 때 리스트가 추가됐으면 좋겠다

 

→ 엔터 누르면 <li><span>내용</span></li> 라는 html 코드가 생성되어야 함.

 

 

 

실행화면

 

태그는 생성되었지만 그 속이 비어있으므로 실행되지 않는다.

 

 

<span>의 값을 바꿔주기 위해 textContent를 사용한다.

 

실행화면

그래도 추가되지 않는다

 

원인

→ createElement를 통해 노드를 생성해줬다. 즉 DOM element 구조는 생성을 해줬지만 우리 페이지에 존재하고 있는 DOM구조에 조립이 안 된 것이다.

 

결론

appendChild라는 메소드를 이용해 조립을 해줘야한다.

 

<li> 내부의 하위 속성으로 태그 하나를 더 추가하겠다.

 

다음은 newLi가 만들어질 공간을 추가해준다.

 

<ul> 안에 newLi가 들어오면 된다.

 

todoList라는 변수에 <ul>을 받아오고

 

밑에서 todoList에 newLi를 조립한다

 

리스트 추가 성공!

 

리스트 추가한 뒤에 input을 비워지면 좋겠다.

 

todoList의 값(value)을 건드려야하기 때문에 코드를 수정했다.

todoList라는 변수에 value 자체를 담지 않는다.

 

리스트가 추가되면 inputbox 내용은 지워진다.