appendChild를 이용하여 늘리기_HTML_1번

 안녕하세요. 알렉스 입니다. 이번에는 html과 javascript를 이용하여 텍스트를 입력받아 'li' tag를 추가하도록 하겠습니다.

 버튼을 'document'에 생성해 줍니다. 버튼에 표시할 문자열은 'Button'으로 합니다.

 input text도 버튼 위쪽에 생성해 줍니다. 텍스트를 입력할 것이니 당연히 타입은 text로 합니다.

리스트를 작성하기 위해서 <ul></ul>을 버튼 아래쪽에 생성합니다. 현재 <ul>에는 아무것도 없기때문에 'document'에서는 빈공간 입니다.

참고 : <div> tag는 </div>를 만나기 전까지 속해있는 아이템(버튼, 텍스트 등등)에 대해서 같은 칸(한줄)에 존재하도록 합니다.

위치 확인을 위해 <ul>안에 <li>를 2개 추가하고 각각 'List1' , 'List2'로 텍스트를 작성합니다.

이제 텍스트 input, 버튼 그리고 리스트에 id를 생성해 줍니다. id는 나중에 JavaScript에서 코딩할때 해당 tag를 추적하고 속성값을 얻을수 있게 해줍니다.

이제 마지막으로 JavaScript 코드를 불러오는 부분을 추가합니다. <script src = [js파일 위치 정보 또는 제목(같은폴더 있을시)]>

이렇게 하면 HTML에 대한 부분을 완료가 되는 것입니다. 다음에는 JavaScript에서 코딩하여 입력받은 텍스트를 리스트에 추가하도록 하겠습니다. 감사합니다.