인프런 커뮤니티 질문&답변

중고급 과정을 듣고 나서 다시 한 번 정리하였습니다.

const test = ["<ul>"];
for(var i = 1; i <= 10; i++) {
   test.push(`<li id=id${i}>id${i}</li>`);
}
test.push("</ul>");
document.body.innerHTML = test.join("");

우선 코딩시간에 나와있는 배열 사용의 예제풀이 입니다. 

텍스트로 덧붙이는 형태라 DOM 구조를 이해하는게 아닌 듯한 느낌이 들었습니다. 

따라서 Tag요소부터 만들어 나가는 형태로 반복문을 진행해보았습니다.  

const newUl = document.createElement('ul');
document.body.append(newUl);
const Ul = document.querySelector('ul');

for(var i = 0; i < 10; i++) {
const newLi = document.createElement('li');
Ul.append(newLi);
const Li = document.querySelectorAll('li')[i];
Li.id = `id${i+1}`;
Li.textContent = `id${i+1}`;
}

보완할 요소가 더 있을 거 같은데 도통 떠오르질 않네요. 배열 구조로 한꺼번에 추가하는 형식으로 트리를 만들어가는 건 어려울 거 같아 질문드려요.