title: Automatically Delete table rows after reaching row limit and add new data to the row using the Websocket data with javascript
body: <p>I am new to JavaScript, not sure if this very basic question. I've created a Bitcoin Price update dashboard using the data fetched from the external WebSocket. I managed to get the data from the WebSocket and display it on the HTML table. The price updates every seconds, So the table rows are going insane. I want to limit the Table row for 14 rows and after the table get 14 rows i want to delete that data and import new data with the Websocket without increasing the HTML table rows. I tried my best to explain.</p>
  <p>I have provided the code snippets below as well as external Websocket from where I am pulling the data.</p>
  <p>Please let me know how should I insert the row dynamically into a HTML table. Thank you so much in advance</p>
  <pre><code>    &lt;script&gt;
          window.onload = () =&gt; {
              function insertRow(price){
    var tr      = document.createElement(&quot;tr&quot;),
        tdCoin  = document.createElement(&quot;td&quot;),
        tdPrice = document.createElement(&quot;td&quot;),
        docFrag = new DocumentFragment();
    tdCoin.textContent = &quot;BTC&quot;;
    tdPrice.textContent = `${Number(price.slice(0,-6)).toLocaleString(&quot;en-US&quot;)}`;
    tr.appendChild(tdCoin);
    tr.appendChild(tdPrice);
    docFrag.appendChild(tr);
    return docFrag;
  }
  
  var binanceSocket = new WebSocket(&quot;wss://stream.binance.com:9443/ws/btcusdt@trade&quot;),
      table = document.getElementById(&quot;pricetable&quot;);
  binanceSocket.onmessage = function(event) {
    var messageObject = JSON.parse(event.data);
    table.appendChild(insertRow(messageObject.p));
  }
  }
          
      &lt;/script&gt;  
  
  
  &lt;table class=&quot;table table-striped&quot;&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;Coin&lt;/th&gt;
                                              &lt;th scope=&quot;col&quot;&gt;Price&lt;/th&gt;
                                            &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody id=&quot;pricetable&quot; class=&quot;crypt-table-hover&quot;&gt;
  
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
  </code></pre>