ul 태그에 innerHTML 안됨, 쉬운해결법

main.do:56 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

console에도 잘 뜨고 div에는 innerHTML되지만 리스트 ul안에 innerHTML안되는 현상이 생겼다.

div에 innerHTML이 된다면, 발상의 전환으로 ul에 div를 넣어 쉽게 해결했다.

 

<ul id="suggestList">
	<div id="innerDivForSuggestList"></div>
</ul>

 

 

추후 더 찾아보니

<ul> 태그는 innerHTML 프로퍼티를 사용하여 내부 HTML 코드를 설정하는 것은 지원되지 않는다고 하는데..

<ul> 요소의 내용을 변경하려면 

<li> 태그를 추가하거나 제거해야 한다고 한다.

이를 통해 목록 아이템을 동적으로 추가하거나 삭제할 수 있다.

var myList = document.getElementById("myList");
var newItem = document.createElement("li");
newItem.innerHTML = "Item 3";
myList.appendChild(newItem);

 

이것저것 테스트해보다 찾은 방법이 잘 돌아가서

굳이 저 기능때문에 4줄을 쓰는 방법보단 div를 이용하는 방법을 선택할 것 같다.

가장 속 편한 방법은 그냥 div에 리스트를 추가하는게..