| <!DOCTYPE html> |
| <html> |
| <body style="font-family: Ahem; -webkit-font-smoothing: none;"> |
| <style> |
| div.table { display: table; } |
| div.section { display: table-row-group; } |
| 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="section" id="tbody-1"> |
| <div class="row" id="row-1"> |
| <div class="cell" id="cell-1"></div> |
| <div class="cell" id="cell-2"></div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| function createDiv() |
| { |
| var divElement = document.createElement("div"); |
| divElement.setAttribute("class", "test"); |
| return divElement; |
| } |
| |
| function insertDiv(tableID, beforeID) |
| { |
| var tableRow = document.getElementById(tableID); |
| var before = document.getElementById(beforeID); |
| tableRow.insertBefore(createDiv(), before); |
| } |
| |
| document.body.offsetTop; |
| |
| insertDiv("row-1", "cell-2"); |
| </script> |
| </body> |
| </html> |
