DRY、JavaScript循环和性能

我正在尝试使用枯燥的规则重构代码，但我不确定实现良好性能和干净代码的最佳实践是什么

项目详情和目标：

我的项目从DeezerAPI中获得了100首歌曲，其中包括img、title、svg等细节。我想把数据传给10个部分

index.html代码：

<main>
 <section>1</section>
 <section>2</section>
 <section>3</section>
 <section>4</section> 
 <section>5</section>
 <section>6</section>
 <section>7</section>
 <section>8</section>
 <section>9</section>
 <section>10</section>
</main>

我的问题是，将li的内容传递到HTML的最佳实践是什么：

只需在index.html中写入100多个li元素

将Javascript函数与循环和appendChild一起使用：

index.js

//呈现ul的
常量renderUl=（）=>{
const allSections=document.queryselectoral（'section'）；
所有节。forEach（（节）=>{
const newUl=document.createElement（'ul'）；
newUl.appendChild（第节）；
})
}
//李的
常量renderLi=（）=>{
const allUl=document.queryselectoral（'ul'）；
诱惑力（ul=>{
对于（让i=0；我不认为有人应该担心湿HTML被提供——它将被压缩，更多的JS意味着客户端的负载更大。但是使用模板引擎或类似的服务器端会更易于维护。@CertainPerformance…或模板引擎客户端，就这一点而言。（敲除、Ractive、Vue等等）请考虑使用.@ AMADAN模板引擎客户端将做与OP已经实现的类似的事情，导致同样的解决方案降低了我的应用程序性能，他担心-除了，可能更糟糕的是由于引擎的开销，我想，我想用香草JS构建这个应用程序，包裹绑定器和babel。不想使用任何其他库/框架。只需编辑文章。
<li>
 <img src="" alt="" />
 <h3>Title song</h3>
 <div class="svg__container">
  <a href="#">
    <i class="fa fa-play"></i>
    <svg> svg body... </svg>
  </a>
 </div>
</li>

// render ul's
const renderUl = () => {

 const allSections = document.querySelectorAll('section');

 allSections.forEach( (section) => {

 const newUl = document.createElement('ul');
 newUl.appendChild(section);
})
}

// render li's

const renderLi = () => {
 const allUl = document.querySelectorAll('ul');

 allUl.forEach( ul => {
   for(let i=0; i<10; i++){
    const newLi = document.createElemenet('li');
    ul.appendChild(newLi);
   }
  })
 }

// then render li Element's

const renderLiElements = () => {
 const allLi = document.querySelectorAll('li');

 allLi.forEach( li => {
   const liElements = 
      `<img src="" alt="" />
       <h3>Title song</h3>
       <div class="svg__container">
        <a href="#">
          <i class="fa fa-play"></i>
          <svg> svg body... </svg>
        </a>
       </div>`

  li.innerHTML = liElements;
 })
}

//then init all functions
const initApp = () => {
 renderUl();
 renderLi();
 renderLiElemenets();
 }
initApp();