javascript : appendChild 하위클래스로 넣어주는 법

    const inputValue = document.querySelector('#todo-input').value
    const newLi = document.createElement('li')
    const newsapn = document.createElement('span')

 

나는 document.querySeletor을 통해 인풋값의 value를 가져오고

document.creactElement( li )와 ( 'span') 을만든뒤 각각 newLi 변수 , new span 변수에 담아주었다.

근데? 이걸 출력하자니 밑에 와 같이 합쳐지지 않은 상태로 뜬다.

 

 

// span안에 inputvalue 값  즉 내가입력하는 값을 span에 넣어준다.
    newspan.textContent= inputValue
    
    // appendClid는 Li안에 하위클레스를 만들어주는데 span을 넣어줄거다.

    newLi.appendChild(newspan)
    // 그럼 new Li는 어떻게 나올까? <li> <span> </span> </li>이렇게 나오겠지
    console.log(newLi)

 

우선 newspan.textContent = inputvalue 값을 넣어서  span 안에 내가원하는 값이 나오게 한뒤

newLi.appendchild(newspan) 을하면 appendchild 는 하위로 넣어주겠다는 얘기인데

li안에 span을 넣으면 밑에와 같은 형식이 되어 합쳐진다.