에러일지) Element.insertAdjacent...

iamokian·2022년 4월 4일
0

전 직장에서 jQeuery를 많이 사용했던 탓에 배열로 데이터 만들어서 for문돌리고 부모안에 자식으로 넣을 때 append 진행시켜~ 하면서 편하게 사용했던 그것을 요즘은 계속 순수 javascript를 손에 익히고, 머리에 넣기 위해 지양하고 있는중이다. 그래서 위 방식을 자바스크립트로 짜던중 발견한 에러일지를 적어본다🙌


대충 내가 원했던 모양새는 위의 이미지..! 하지만 여기서 insertAdjacentElement()를 사용하는 바람에 에러발생

Uncaught TypeError은 자주 마주하는 에러이다. 뜻은 찾아 줍줍해보니
"이 에러는 크롬에서 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때 발생합니다."
라고한다..

내가 삽입하려고 했던것은 요소노드가 아닌 텍스트, HTML이었기 때문에 발생한것 같다!(MDN에서 줍줍한 정보)

Element.insertAdjacentHTML()

  • 인터페이스 의 insertAdjacentHTML()메서드는 Element지정된 텍스트를 HTML 또는 XML로 구문 분석하고 결과 노드를 지정된 위치의 DOM 트리에 삽입합니다.

Element.insertAdjacentElement()

  • 인터페이스 의 insertAdjacentElement()메서드 Element는 호출된 요소에 상대적인 지정된 위치에 지정된 요소 노드를 삽입합니다.

두 속성에는 확연한 차이가 있었다! 또한 매개변수로 들어가는 포지션영역에는 이미지와같이 afterbegin 말고도 다양한 매개변수가 있으니 다양한 경우에서 이용하기 좋을듯 싶다🧐

결론‼️
Element.insertAdjacentElement() 를 써서 에러가 났으면 Element.insertAdjacentHTML()로 바꿔보자🤗

profile
필기하고 기록하고

0개의 댓글