117. Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. TIL 23.01.25

---

 

 

Filed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

fetch 통신한 후 json에 있는 title을 ul태그 아래 li태그에 for문을 돌려서 작성을 하려고 했다.
코드를 작성 후 정상적으로 출력되지 않아 콘솔 창을 봤더니 아래 오류가 뜸

appendChild는 Node 만 추가 할 수 있다는 얘기

 

 

문제 코드

fetch('https://jsonplaceholder.typicode.com/todos') 
    .then((response) =>response.json())//통신이 된 후 json값 가져오기
    .then((data) => {//json을 처리한 후 가져온 body부분이 data
        const customULTag = document.createElement('ul'); //ul태그 생성
        document.querySelector('body').appendChild(customULTag);//body아래에 ul태그 넣기
        let customLITag;

        for(item of data){
            let customLITag = document.createElement('li').textContent = item["title"];//li태그를 생성 후 json에 title값 가져오기
            customULTag.appendChild(customLITag);//ul태그 아래에 li태그 넣기
            }
});

customULTag.appendChild(customLITag); 이 부분에서 오류가 났음

 

그래서 customLITag부분이 오류가 난거 같아서 아래와 같이 수정을 했다

let customLITag = document.createElement('li')
customLITag.textContent = item["title"];

 

해결

fetch('https://jsonplaceholder.typicode.com/todos') 
    .then((response) =>response.json())//통신이 된 후 json값 가져오기
    .then((data) => {//json을 처리한 후 가져온 body부분이 data
        const customULTag = document.createElement('ul'); //ul태그 생성
        document.querySelector('body').appendChild(customULTag);//body아래에 ul태그 넣기
        let customLITag;

        for(item of data){
            let customLITag = document.createElement('li')
            customLITag.textContent = item["title"]; //title넣기
            customULTag.appendChild(customLITag);//ul태그 아래에 li태그 넣기
            }
});

 

 

결과