<!DOCTYPE html> <html> <body style="font-family: Ahem; -webkit-font-smoothing: none;"> <style> div.table { display: table; } div.cell { display: table-cell; width: 50px; height: 50px; background-color: blue; } div.row { display: table-row; } div.test { background-color: green; width: 50px; height: 50px; } </style> <div class="table" id="table-1"> <div class="row" id="row-1"> <div class="cell"></div> </div> <div class="row" id="row-2"> <div class="cell"></div> </div> </div> <script> function createDiv() { var divElement = document.createElement("div"); divElement.setAttribute("class", "test"); return divElement; } function insertDiv(tableID, beforeID) { var table = document.getElementById(tableID); var before = document.getElementById(beforeID); table.insertBefore(createDiv(), before); } document.body.offsetTop; insertDiv("table-1", "row-2"); </script> </body> </html>