appendChild를 이용하여 늘리기_JavaScript_2번

 안녕하세요. 이번에는 저번시간때 만들었던 html에다가 JavaScript코드를 추가할 것입니다.

 위의 2개의 const는 선언을 하는것인데 아래에서 다시 설명드리도록 하겠습니다.

 일단 JavaScript에 위와 같이 작성을 합니다. 버튼을 누를시 실제 동작하는 함수는 'test()'함수 입니다. 

 사용자가 실제로 버튼을 누를시 'btn00.onclick = test'부분이 동작합니다. 이때 'test()'함수를 찾게 됩니다. 만약 'btn00.onclick = test()'를 하게 되면 함수의 리턴값을 넣게 되기 때문에 에러가 발생합니다. 

 

일단 함수를 만들것입니다. 위 순서도는 함수의 진행 순서도를 표현한 것이며 버튼을 클릭하기 전에 이미 'inputText'와 'btn00'이 선언 되어 있는것을 알수 있습니다. 'inputText'와 'btn00'는 'document.querySelector'를 통해서 해당(여기서 텍스트와 버튼) 아이콘에 대한 정보를 갖고 올수 있습니다. 이때 '#'은 아이디를 의미하며 HTML에서 선언한 id를 찾아갑니다.

- listID는 'document'에서 Id가 'List'인 'element'를 넣는다.

 먼저 초기값을 설정할때 기존에 존재하는 <ul id = "List">의 'element'를 listID의 변수로 저장을 합니다. (추후 listID에 <li>를 추가함). 

getElementById 대신 querySelector를 사용할수 있다.

- liElement는 'document'에 Tag 'li'가 있는 'element'를 생성한다.

 이제 새로운 element를 생성(liElement)하여 'li'(<li></li>) tag를 추가합니다. 현재 liElement는 <ul id = "List">에 추가가 되지 않은 상태입니다. 

- inputText.value 값을 liElement에 기입합니다.

 이제 화면상에 있는 'ABC'를 liElement에 입력합니다. 이때 입력된 텍스트에 따라 다르지만 위 예제에서는 'ABC'가 들어갔습니다. 따라서 <li>ABC</li>가 되는것을 알수 있습니다.현재 liElement는 <ul id = "List">에 추가가 되지 않은 상태입니다. 

 이제 liElement를 listID에 'appendChild'합니다. 이 코드를 지나게 되면 비로서 <ul id = "List">에 <li>ABC</li>에 추가 되는것을 알수 있습니다.

위는 'index.js'의 완성된 코드 입니다.

위는 'Button'누를시 실제 리스트에 'ABC'를 추가하는 모습