Uncaught DOMException: Failed to execute 'insertAdjacentHTML' on 'Element': The value provided ('before') is not one of 'beforeBegin', 'afterBegin', 'beforeEnd', or 'afterEnd'. at XMLHttpRequest.<anonymous>

 

에러 원인

 

insertAdjacentHTML 메서드 호출 시 잘못된 위치 값을 전달하여 발생

 

 

* insertAdjacentHTML 메서드

insertAdjacentHTML 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입한다.

 

매개변수

- beforeBegin : 요소 이전에 위치한다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을때만 유효하다.  해당 요소의 시작 태그 이전에 HTML을 삽입한다.

- afterBegin : 요소 바로 안에서 처음 자식 이전에 위치한다. 해당 요소의 시작 태그 바로 뒤에 HTML을 삽입한다.

- beforeEnd : 요소 바로 안에서 마지막 자식 이후에 위치한다. 해당 요소의 끝 태그 바로 앞에 HTML을 삽입한다.

- afterEnd : 요소 이후에 위치한다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을때만 유효하다. 해당 요소의 끝 태그 이후에 HTML을 삽입한다. 

 

 

해당 코드에서 insertAdjacentHTML 메서드를 호출할때 before라는 잘못된 위치값을 사용해서 에러가 발생하였다.

 

 

 

해결 방법

 

위치값을 beforeEnd로 수정하였다.