How to add a new "top" row to a table in jquery without deleting the other rows

First off – I did look at How to replace innerHTML of a div using jQuery? and that’s great if I want to replace the fill tag <tr> in this case.

I’m trying to make a dynamic table that is loading off of an API for crypto-mining. Whenever there are new blocks hit, I want to add them to the top of the table and delete any over 100 (Only 100 <tr> max).

Right now, what I’m doing is:

document.getElementById('blockList').innerHTML += "<tr><td>" ...

This adds rows to the top of:

<table class="table1">
    <thead class="thead-light">
        <tr>
            <th>#</th>
            <th>Time (Local)</th>
            <th class='collapsableHeader' onclick='collapseTable()'>Hash</th>
            <th>Height</th>
            <th>Effort</th>
            <th>Found By</th>
            <th>Pool/Solo</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="blockList"></tbody>
</table>

The problem with the way I’m doing it now is that it clears the entire table:

document.getElementById("blockList").innerHTML = "";

…this causes a bit of flashing, or "twitching" as I prefer to call it, while the data reloads everytime my setInterval() is called (about every 10 seconds).

My first hope is that jQuery will minimize or remove the flashing. Here’s where I get hung up – the link above is to replace the tag with new information with either:

$("#blockList").html("STUFF TO REPLACE EXISTING STUFF");
//or
$("#blockList").text("STUFF TO REPLACE EXISTING STUFF");

text() won’t work in my case because I’m using the innerHTML += to add the tags as well…

document.getElementById('blockList').innerHTML += "<tr><td>" + i + "</td><td>" + displayBlocks[i]["timestamp"] + "</td><td class='collapsable'>" + displayBlocks[i]["hash"] + "</td><td class='collapsablePlaceholders'>|</td><td>" + displayBlocks[i]["height"] + "</td><td style='color:" + displayBlocks[i]["luckColor"] + "'>" + displayBlocks[i]["luck"] + "</td><td>" + displayBlocks[i]["worker"] + "</td><td>" + displayBlocks[i]["ps"] + "</td><td>" + displayBlocks[i]["status"] + "</td></tr>";

If this is possible, then removing the rows > 100 will be easy (I hope).

So – all this to say:

Is it possible to ADD information to an id/tag in jQuery without deleting all of the existing data in it. Basically the equivalent to .innerHTML += specifically the += part.

>Solution :

Here’s some examples on how to add to top, add to bottom, remove from top and remove from bottom using JQ

let n = 0
$('button').click(function() {
  n++
  let fakerow = `<tr><td>${n}</td><td>12:34</td><td>123123123</td><td>10</td><td>??</td><td>Fred</td><td>Solo</td><td>available</td></tr>`;

  let action = $(this).data('action');
  if (action == 'add-top') {
    $('#blockList').prepend($(fakerow))
  } else if (action == 'add-bottom') {
    $('#blockList').append($(fakerow))
  } else if (action == 'remove-top') {
    $('#blockList tr').first().remove()
  } else if (action == 'remove-bottom') {
    $('#blockList tr').last().remove()

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
  <thead class="thead-light">
    <tr>
      <th>#</th>
      <th>Time (Local)</th>
      <th class='collapsableHeader' onclick='collapseTable()'>Hash</th>
      <th>Height</th>
      <th>Effort</th>
      <th>Found By</th>
      <th>Pool/Solo</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="blockList"></tbody>
</table>
<hr>

<button data-action='add-top'>Add row to top</button>
<button data-action='add-bottom'>Add row to end</button>
<hr>
<button data-action='remove-top'>Remove row from top</button>
<button data-action='remove-bottom'>Remove row from end</button>