공부기록/바닐라 자바스크립트

동적인 DOM 객체 생성

_우지 2022. 7. 19. 17:07

 

 

 

 

다음 코드는 div 태그를 정적으로 갯수를 지정해주고 innerHTML 을 통해 값을 넣는 코드이다.

 <body>
    <div id="todo-list"></div>
    <div id="todo-list-2"></div>
    <div id="todo-list-3"></div>
    <script>
      function TodoList(data, selector) {
        ...
        this.render = () => {
          const todoListDocs = document.querySelector(selector);
          todoListDocs.innerHTML = `<ul>${this.data
            .map(({ text, isCompleted }) =>
              isCompleted ? `<li><s>${text}</s></li>` : `<li>${text}</li>`
            )
            .join('')}</ul>`;
        };
        ...
      }
      const validData = new Validator();
      const todoList = new TodoList(validData.validate(data), '#todo-list');
      const todoList2 = new TodoList(validData.validate(data2), '#todo-list-2');
      const todoList3 = new TodoList(validData.validate(data3), '#todo-list-3');
      setTimeout(() => {
        todoList.setState(data4, validData);
      }, 2000);
    </script>
  </body>

 

다음 코드를 보자.

뭐가 다를까?

우선 위 코드는 <div>를 정적으로 몇개 선언해주어야했지만, 이 코드를 보면 <main class="App"></main> 이다.

$target 변수에 <main class="App"></main> 의 DOM 객체를 할당한다. ($를 붙힌 이유는 DOM 객체를 할당한 변수라는 컨벤션이다.)

이제 TodoList 생성자 함수안에서 this.$target createElement('ul')을 통해서 ul 태그를 만들어준다.

그 후 ul 태그를 main 태그안에 넣어주는 것이다.

 <body>
    <main class="App"></main>
    <script>
      function TodoList(data, $app) {
        ...
        this.$target = document.createElement('ul');
        $app.appendChild(this.$target);
        this.render = () => {
          this.$target.innerHTML = `<ul>${this.data
            .map(({ text, isCompleted }) =>
              isCompleted ? `<li><s>${text}</s></li>` : `<li>${text}</li>`
            )
            .join('')}</ul>`;
        };
        ...
      }
      const $target = document.querySelector('.App');
      const validData = new Validator();
      const todoList = new TodoList(validData.validate(data), $target);
      const todoList2 = new TodoList(validData.validate(data2), $target);
      const todoList3 = new TodoList(validData.validate(data3), $target);
	    ...
    </script>
  </body>

 <main class="App"></main>  는 다음과 같아질 것이다.

 <main class="App">
 	<ul></ul>
 	<ul></ul>
 	<ul></ul>
 </main>