title: How to properly optimize a long for loop that concats a long string everytime?
body: <p>I'm doing a small learning project, it takes a coin list from an API and then builds a page full of bootstrap card for the length of the array received from the API.
  While developing i only used 100 first coins to avoid long wait times, but now that  I'm done when i try the entire 3900+ coins its takes an impractically long time.</p>
  
  <p>I'm pretty sure the way i added the string is the source of the problem, I'll add my code and I'm sure it will all make more sense.</p>
  
  <p>I tried building the entire string then append it - no good still slow.
  I tried changing it's innerHTML every time and then append it (append is inside the for loop), but it just overwrites all the older coins and appends only the last one.</p>
  
  <p>What i want it to do is actually append each box separately and do it in a reasonable amount of time, right now it takes over 30 minutes to complete which is obviously not good.</p>
  
  <p>The current version of code i added is the one that takes a long time but eventually does it right (although its only 50 iterations in the for loop so it doesn't get stuck if you try it right now, it needs to be over 3900 iterations)</p>
  
  <pre class="lang-js prettyprint-override"><code>function homeStart(coins: any[]): void {
  
    var divcreate = document.createElement("div");
  
    for (var i = 0; i &lt; 50; i++) {
      // console.log(coins[i]);
      // ******This is where the string addup starts
      divcreate.innerHTML += `
              &lt;div class="card text-dark bg-dark m-auto makeinline" 
              id="${coins[i].id}${i}" style="max-width: 18rem;"&gt;
              &lt;div class="card-header"&gt;
                  &lt;div class="flexalign"&gt;
                      &lt;span class="coinsymbol" 
              id="${coins[i].symbol.toUpperCase() + 
              "a1"}"&gt;${coins[i].symbol.toUpperCase()} 
             &lt;/span&gt;
                      &lt;label class="switch"&gt;
                          &lt;input type="checkbox" 
           id="${coins[i].id}${coins[i].symbol}" 
          onchange="selectedCoinUpdate(this,'${coins[i].symbol}')"&gt; 
                          &lt;span class="slider round"&gt;&lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                  &lt;div class=""&gt;
                      &lt;h5 class="card-title coinname"&gt;${coins[i].name}&lt;/h5&gt;
                      &lt;button type="button" class="btn btn-secondary" data- 
         toggle="collapse" href="#collapseIdentity${i}" role="button"
                            aria-expanded="false" aria- 
         controls="collapseIdentity${i}" 
         onclick="moreInfo('${coins[i].id}')"&gt;More info&lt;/button&gt;
                  &lt;/div&gt;
                      &lt;div class="collapse" id="collapseIdentity${i}"&gt;
                          &lt;div class="card-body" id="${coins[i].id}"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;`;
  
    }
    // ******This is where the string addup ends
    $("#pagecont").append(divcreate);
  
  }
  </code></pre>