동적으로 태그생성해서 데이터바인딩 질문 드립니다.

[강병민]

    <!-- <ul>
                <div class="history-title">
                  <span class="date"></span>
                  <span class="sum-spending"></span>
                </div>
                <li>
                  <span class="item"></span>
                  <span class="money"></span>
                </li>
              </ul> -->

이런 html 구조를 만들어서 데이터 바인딩 하려고 하는데요!

태그를 전부 동적으로 생성해서

`

const ulElement = document.createElement('ul');
const liElement = document.createElement('li');
const divElement = document.createElement('div');

const historyTitle = document.querySelector('.history-title');
const date = document.querySelector('.date');
const sumSpending = document.querySelector('.sum-spending');
const item = document.querySelector('.item');
const money = document.querySelector('.money');

const todayHistory = document.querySelector('.today-history');

todayHistory.appendChild(ulElement).classList.add('ul-list');
document.querySelector('.ul-list').appendChild(divElement).classList.add('history-title');

`

 

이런식으로 짠 이유는  JSON 데이터를 받아와서 데이터 갯수에 맞게 동적으로 생성해서 바인딩 하려고 했는데, 혹시  이런 방법 말고 다른 방법이 있을까요?

[codingapple]

.insertAdjacentHTML( 'beforeend', '<div>새로운내용</div>');

이런거 쓰면 더 간편합니다 

[글쓴이]

글