JS에서 HTML태그 만들기

List 화면을 만들어서 할일 목록을 나열하는 화면을 만들때
새로운 할 일을 하나하나 추가할때 JS의 함수를 통해서 HTML의 새로운 li 태그를 만드는 방법에 대해 알아보자.

만들려고 하는 양식은

<ul>
  <li><span> 할일 </span></li>
</ul>

li 안에 span 태그로 만들 예정

const newTag = function () {
    if (window.event.keyCode === 13){
        const InputValue = document.querySelector('#todo-input').value;
        const newLi = document.createElement('li')
        const newSpan = document.createElement('span')
    }
}

엔터를 누르면 입력한 값 가져오고, li, span 태그를 만드는 코드인데
실행해보면 아무런 동작도 하지않음.

콘솔로 찍어 보면

console.log(inputValue,newLi,newSpan)

이렇게 만들어 지기는 하는데 값이 제대로 입력되지 않아있음.

할 일 이라는 글자를 span 태그 안쪽에 넣어주기 위해서

newSpan.textContent = inputValue;

이런식으로 textContent 를 사용해서 값을 넣어주면

글자가 span 안으로 들어가 있음.
똑같이 li 태그에도 넣어주면되는데
위랑 똑같은 방법으로

newLi.textContent = newSpan

이런식으로 넣어주면

이상하게 들어가버림.
태그에 태그를 넣기 위해서는 appenChild 라는 기능을 사용해서
하위 태그에 넣는 기능을 사용해야함.

newSpan.textContent = inputValue;
newLi.appendChild(newSpan);

이렇게 조립은 되었지만 아직 화면에 새롭게 추가 되지는 않음

<ul>
  <li><span> 할일 </span></li>
</ul>

li태그가 ul 태그에 추가 되어야 하기 때문
ul 태그에 id 값을 입력해주고

<ul id="todo-list">
  <li><span> 할일 </span></li>
</ul>

  const newTag = function () {
    if (window.event.keyCode === 13){
      const todoList= document.querySelector('#todo-list');
      const inputValue = document.querySelector('#todo-input').value;
      const newLi = document.createElement('li')
      const newSpan = document.createElement('span')

      newSpan.textContent = inputValue;
      newLi.appendChild(newSpan);
      todoList.appendChild(newLi)
    }
  }

이런식으로 만들면
엔터를 입력할 때마다 input의 값을 받아들여와서
span 태그로 -> span태그를 li 태그로 -> li태그를 ul태그로 집어넣게됨.

이처럼 화면에도 추가되는걸 볼 수 있음.