Inserting dynamic row into HTML table

Question

I'm trying to insert dynamic rows in an HTML table. If I comment the line which is supposed to insert dynamic row in the html tag (.innerHTML), the format of the table is fine with the header row on top and the first body row just underneath.

As soon as I uncomment the dynamic row rendering, the dynamic row is created on top of the header row. I cannot find the reason of it. Have a look at the below jsfiddle test code.

html_out = "<tr><td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td></tr>";
document.getElementById("render").innerHTML = html_out;

#scrolltable { margin-top: 20px; height: 150px; overflow: auto; }
#scrolltable table { border-collapse: collapse; }
#scrolltable th div { position: absolute; margin-top: -20px; }

<div id="scrolltable">
    <table>
        <col width ="50px">
        <col width ="60px">
        <col width ="120px">
        <col width ="100px">
        <col width ="120px">
        <tr>
            <th><div></div></th>
            <th><div>Rank</div></th>
            <th><div>Squad Name</div></th>
            <th><div>Skill Pts</div></th>
            <th><div>Current War (vs)</div></th>
        </tr>
        <tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr>
        <div id="render"></div>
    </table>
</div>

Correct table formatting:

Row overlapping header:

https://jsfiddle.net/ShaiHul/0rzqvcbm/60/

Answer 1

Steps to Take for Valid HTML and Accurate DOM Manipulation

1. Remove .render it's incredibly invalid simply because the only child element <table>/<tbody> can have is <tr>.

2. You probably resorted to using an dive that way because when using .innerHTML the direct logical way ended up obliterating a portion of the table. .innerHTML overwrites whatever it targets unless you use += instead of = which makes .innerHTML append instead overwrite content.

   document.querySelector('table').innerHTML += HTMLString

3. But there's a method that renders Strings to HTML like .innerHTML but inserts Strings instead overwrites content. Not only is it safer but it's far more accurate.

   .insertAdjacentHTML( position, HTMLString )

   The first parameter, position is one of four possible String, below is represents a target element to which we intend to place a HTMLString (the second parameter) into or around:
   

   Position: "beforebegin" <table> "afterbegin" ...... "beforeend" </table> "afterend"

---

Demo

HTMLStr = "<tr><td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td></tr>";

document.querySelector("table").insertAdjacentHTML('beforeend', HTMLStr);

#scrolltable {
  margin-top: 20px;
  height: 150px;
  overflow: auto;
}

#scrolltable table {
  border-collapse: collapse;
}

#scrolltable th div {
  position: absolute;
  margin-top: -20px;
}

<div id="scrolltable"><table><col width="50px"><col width="60px"><col width="120px"><col width="100px"><col width="120px"><tr><th><div></div></th><th><div>Rank</div></th><th><div>Squad Name</div></th><th><div>Skill Pts</div></th><th><div>Current War (vs)</div></th></tr><tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr></table></div>

Answer 2

You're adding a div to a table, that messes up the layout. You should just insert the HTML into a tr instead of a div and it works fine:

html_out = "<td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td>";
document.getElementById("render").innerHTML = html_out;

#scrolltable { margin-top: 20px; height: 150px; overflow: auto; }
#scrolltable table { border-collapse: collapse; }
#scrolltable th div { position: absolute; margin-top: -20px; }

<div id="scrolltable">
    <table>
        <col width ="50px">
        <col width ="60px">
        <col width ="120px">
        <col width ="100px">
        <col width ="120px">
        <tr>
            <th><div></div></th>
            <th><div>Rank</div></th>
            <th><div>Squad Name</div></th>
            <th><div>Skill Pts</div></th>
            <th><div>Current War (vs)</div></th>
        </tr>
        <tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr>
        <tr id="render"></tr>
    </table>
</div>

If you don't want to rely on having an empty element in the html, you can just get the table and use appendChild() to add another table row to it, e.g.:

var html_out = "<td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td>";
var tr = document.createElement("tr");
tr.innerHTML = html_out;
document.getElementById("table").appendChild(tr);