title: DRY, JavaScript Loops and Performance
body: <p>I am trying to refactor my code using DRY rules and I am not sure what is the best practice to achieve good performance and clean code.</p>
  
  <p><strong>Project details and goal:</strong></p>
  
  <p>My project gets 100 songs from deezer API with details like img, title, svg. I want to pass that data to 10 sections.</p>
  
  <p><strong>index.html</strong> code:</p>
  
  <pre><code>&lt;main&gt;
   &lt;section&gt;1&lt;/section&gt;
   &lt;section&gt;2&lt;/section&gt;
   &lt;section&gt;3&lt;/section&gt;
   &lt;section&gt;4&lt;/section&gt; 
   &lt;section&gt;5&lt;/section&gt;
   &lt;section&gt;6&lt;/section&gt;
   &lt;section&gt;7&lt;/section&gt;
   &lt;section&gt;8&lt;/section&gt;
   &lt;section&gt;9&lt;/section&gt;
   &lt;section&gt;10&lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>each <code>section</code></strong> should have <code>ul</code> and 10 <code>li</code> with song details</p>
  
  <p><strong>each <code>li</code></strong> should have inside nested HTML elements</p>
  
  <pre><code>&lt;li&gt;
   &lt;img src="" alt="" /&gt;
   &lt;h3&gt;Title song&lt;/h3&gt;
   &lt;div class="svg__container"&gt;
    &lt;a href="#"&gt;
      &lt;i class="fa fa-play"&gt;&lt;/i&gt;
      &lt;svg&gt; svg body... &lt;/svg&gt;
    &lt;/a&gt;
   &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>My question is what is the best practice to pass that li's to HTML:</p>
  
  <ol>
  <li>Just write 100+ li elements in index.html</li>
  <li><p>Using Javascript functions with loops and appendChild:</p>
  
  <p><strong>index.js</strong></p></li>
  </ol>
  
  <pre><code>// render ul's
  const renderUl = () =&gt; {
  
   const allSections = document.querySelectorAll('section');
  
   allSections.forEach( (section) =&gt; {
  
   const newUl = document.createElement('ul');
   newUl.appendChild(section);
  })
  }
  
  // render li's
  
  const renderLi = () =&gt; {
   const allUl = document.querySelectorAll('ul');
  
   allUl.forEach( ul =&gt; {
     for(let i=0; i&lt;10; i++){
      const newLi = document.createElemenet('li');
      ul.appendChild(newLi);
     }
    })
   }
  
  // then render li Element's
  
  const renderLiElements = () =&gt; {
   const allLi = document.querySelectorAll('li');
  
   allLi.forEach( li =&gt; {
     const liElements = 
        `&lt;img src="" alt="" /&gt;
         &lt;h3&gt;Title song&lt;/h3&gt;
         &lt;div class="svg__container"&gt;
          &lt;a href="#"&gt;
            &lt;i class="fa fa-play"&gt;&lt;/i&gt;
            &lt;svg&gt; svg body... &lt;/svg&gt;
          &lt;/a&gt;
         &lt;/div&gt;`
  
    li.innerHTML = liElements;
   })
  }
  
  //then init all functions
  const initApp = () =&gt; {
   renderUl();
   renderLi();
   renderLiElemenets();
   }
  initApp();
  </code></pre>
  
  <p><em>That solution degrades my application performance, but it seems to be more DRY. I am not repeating 100 times same svg and same icons.</em></p>
  
  <p>I am 100% sure there is some other way to achieve my goal and don't repeat 100 times same elements. Hope you guys can point me to better solution.</p>
  
  <p><strong>// EDIT</strong></p>
  
  <p><em>I want to build this app with vanilla js, parcel bundler and babel. Don't want to use any other libraries/frameworks.</em></p>