[재귀함수] Tree-UI

daun·2022년 6월 24일
0
function createTreeView(menu, currentNode) {
  for (let i = 0; i < menu.length; i++) {
    const li = document.createElement("li");
    if (menu[i].children === undefined) {
      li.textContent = menu[i].name;
    } else {
      const ul = document.createElement("ul");
      const input = document.createElement("input");
      const span = document.createElement("span");
      input.type = "checkbox";
      span.textContent = menu[i].name;
      li.appendChild(input);
      li.appendChild(span);
      li.appendChild(createTreeView(menu[i].children, ul));
    }
    currentNode.appendChild(li);
  }
  return currentNode;
}
createTreeView(menu, root);

// (for)반복문 돌려서 자식노드 있는지 확인하기
// root(=ul)밑에 붙을 li는 전역객체로 선언
// (if) 자식노드 없는 경우
// 1. li 만든다
// (else) 자식노드 있는 경우
// 1. ul, input, span 만든다
// 2. 자식노트 데이터를 가지고 또 다른 li만든다 = 재귀함수
// 반복문을 돌린 뒤 나온 li를 currentNode(ul)에 붙인다.
// cerrnetNode를 리턴한다.

profile
Hello world!

0개의 댓글