title: Display a load more button in a mapped json array of objects
body: <p>I have a fetch request for my sample application, that receive a json. I've mapped this json and i can potentially display over 100 elements with a single request.</p>
  <p>The problem is that i want to implement a load more button to make the page more simple to read and load (for example i want to display 20 items, and other 20 if the load more button is triggered).</p>
  <p>Here is my sample request in a reproducible demo: <a href="https://jsfiddle.net/0mc3gn9f/" rel="nofollow noreferrer">https://jsfiddle.net/0mc3gn9f/</a></p>
  <p>How can i implement a load more button in vanilla js?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let tableBody = document.getElementById("tab-body");
  
  
  fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&amp;order=market_cap_desc&amp;per_page=100&amp;page=1&amp;sparkline=false", {cache: "no-cache"})
    .then((response) =&gt; response.json())
    .then((data) =&gt; {
      this.criptoInfo = data;
      return this.criptoInfo;
    })
    .then((coinMap) =&gt; {
      let cripto = coinMap.map((coin) =&gt; {
          console.log(coin)
        let tr = document.createElement("tr");
        tableBody.appendChild(tr);
        tr.innerHTML = `&lt;td&gt;
          &lt;div class="name-value coin-container"&gt;
              &lt;img class="coin-image" src="${coin.image}"&gt;
              &lt;p class="coin-name"&gt;${coin.name}&lt;/p&gt;
              &lt;p class="coin-abbrName"&gt;${coin.symbol}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;p class="price coin-name"&gt;&lt;b&gt;${coin.current_price} €&lt;/b&gt;&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p class="value-item coin-name"&gt;${coin.ath_change_percentage} %&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p class="value-item coin-name"&gt;${coin.high_24h} €&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p class="value-item coin-name"&gt;${coin.market_cap} €&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p class="value-item coin-name"&gt;${coin.total_supply} €&lt;/p&gt;&lt;/td&gt;
      `;
      });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;0,700;0,900;1,100&amp;display=swap");
  nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #040418;
    height: 20vh;
  }
  nav .logo {
    width: 110px;
  }
  nav .logo img {
    width: 100%;
  }
  nav a {
    margin: 1rem;
    text-decoration: none;
    font-weight: bolder;
    font-size: 1.8rem;
    color: #e0dada;
  }
  
  .box-table {
    margin-inline: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    text-align: justify;
  }
  .box-table .coin-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem;
  }
  .box-table .coin-container img {
    width: 40px;
  }
  .box-table .coin-container .coin-abbrName {
    text-transform: uppercase;
    color: dimgray;
  }
  .box-table .name-value {
    width: 300px;
  }
  .box-table .price {
    width: 200px;
  }
  .box-table .value-item {
    width: 180px;
  }
  .box-table .more-coins {
    width: 250px;
    padding: 1rem;
    justify-content: center;
  }
  
  thead:after {
    content: "@";
    display: block;
    line-height: 30px;
    text-indent: -99999px;
  }
  
  #tab-body &gt; tr {
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  }
  
  .presentation {
    height: 80vh;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background: #3903f9;
    background: linear-gradient(352deg, #3903f9 45%, #040418 70%);
  }
  .presentation .titles {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .presentation .titles h1 {
    color: rgba(40, 40, 236, 0.966);
    font-size: 3rem;
    padding: 1rem;
    text-align: center;
    line-height: 2rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
  }
  .presentation .titles h2 {
    font-size: 2rem;
    width: 500px;
    line-height: 3rem;
    justify-self: center;
    color: #fff;
  }
  .presentation .image-home-container {
    width: 50%;
    display: flex;
    justify-content: center;
  }
  .presentation .image-home-container .image-home {
    width: 250px;
    align-self: center;
    border: 0;
  }
  .presentation .image-home-container .image-home img {
    width: 100%;
  }
  .presentation button {
    width: 250px;
    height: 80px;
    background-color: #080808;
    border: 2px solid white;
    margin-bottom: 1rem;
    border-radius: 30px;
    font-size: 1.6rem;
    color: #fff;
  }
  .presentation button:hover {
    width: 300px;
    transition: 2s;
    font-size: 2rem;
    background-color: #fff;
    color: black;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", serif;
  }
  
  body,
  html {
    background-color: #fdfdfd;
  }
  
  .header-container {
    background-image: url(./assets/header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 400px;
    margin-bottom: 2rem;
    position: relative;
  }
  .header-container .heading-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2.48rem;
    font-family: Lato, serif;
    font-weight: 900;
    background: #0000005c;
    padding: 1rem;
    text-align: center;
    border-radius: 15px;
  }
  .header-container .heading-title h3 {
    font-size: 1.5rem;
    font-weight: 300;
  }
  
  /*# sourceMappingURL=style.css.map */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"/&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"/&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"/&gt;
    &lt;link
      href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&amp;family=Roboto+Mono:wght@300&amp;display=swap"
      rel="stylesheet"
    /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- TABLE --&gt;
  &lt;section&gt;
    &lt;div class="box-table"&gt;
      &lt;table id="tab"&gt;
        &lt;thead id="table-head"&gt;
        &lt;tr&gt;
          &lt;th class="name-value"&gt;Nome&lt;/th&gt;
          &lt;th class="price"&gt;Prezzo&lt;/th&gt;
          &lt;th class="value-item"&gt;Variazione&lt;/th&gt;
          &lt;th class="value-item"&gt;Volume(24 h)&lt;/th&gt;
          &lt;th class="value-item"&gt;Capitalizzazione mercato&lt;/th&gt;
          &lt;th class="value-item"&gt;Offerta&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id="tab-body"&gt;&lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;button id="load-more"&gt;Load More&lt;/button&gt;
  &lt;/section&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>