바닐라js + string으로 html 다루기

같이 교육을 듣는 팀원분이 코드를 깔끔하게 작성하셔서 참조하였다.
예전 vanilla js 로 컴포넌트로 관리하는 아티클을 읽었을 때도 사용된 방법이다.

string으로 template를 정의한 뒤 바꾸는 방식이다.

let ul = document.createElement("ul");
let template = `
    <li class="d-flex-col justify-content-between">
    <div class="py-2 d-flex justify-content-between">
    <h2>{{date}}</h2>
    <span>{{total}}</span>
    </div>
    <ul class="px-2 d-flex-col " data-date={{data-date}}></ul>
    </li>
    `;

template = template.replace("{{data-date}}", ele.date);
template = template.replace("{{date}}", ele.date);
template = template.replace("{{total}}", addComma(ele.total));

ul.innerHTML = template;
transactionHistorybyDocument.append(ul);

ref

상민님

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%80%E1%85%AE%E1%84%92%E1%85%A7%E1%86%AB