JSFiddle - React, Tailwind, and code Playground

by naldenvb

HTML

<!HTML>
<html>
    <head>
    </head>
    <body>
        <table id="complete">
            <tbody>
                <tr>
                    <td>I AM TD</td>
                </tr>
            </tbody>
        </table>
        <table id="incomplete">
            <tr>
                <td>NO I AM TD</td>
            </tr>
        </table>
        <table id="empty">
        </table>
    </body>
</html>

JavaScript

function checkTableForTbody(table) {
    for (var i = 0; i < table.childNodes.length; i++) {
        if (table.childNodes[i].nodeType == 1 &&
            table.childNodes[i].nodeName == "TBODY") {
            return true;
        }
    }
    return false;
}

function tests() {   
    var completeTable = document.getElementById("complete");
    var incompleteTable = document.getElementById("incomplete");
    var emptyTable = document.getElementById("empty");
    var createdTable = document.createElement("table");
    
    // obviously the complete table has the tbody, but lets check
    if (checkTableForTbody(completeTable)) {
        console.log("The complete table has a table body");   
    }
    
    // did the browser put a tbody in the incomplete table?
    if (checkTableForTbody(incompleteTable)) {
        console.log("The incomplete table has a table body");   
    }
    
    // did the browser put a tbody in the empty table?
    if (checkTableForTbody(emptyTable)) {
        console.log("The empty table has a table body");   
    }
    
    // if we append a tr to the empty table, does it make a tbody?
    var tr = document.createElement("tr");
    emptyTable.appendChild(tr);
    if (checkTableForTbody(emptyTable)) {
        console.log("The empty table has a tbody after we give it a tr");   
    }
    
    // if we append a td to the empty table, does it make a tbody?
    tr.appendChild(document.createElement("td"));
    if (checkTableForTbody(emptyTable)) {
        console.log("The empty table has a tbody after we give it a td");   
    }
    
    // If we put the created table in the DOM, does it have a tbody?
    document.body.appendChild(createdTable);
    if (checkTableForTbody(createdTable)) {
        console.log("The created table has a table body after we append it to the body");   
    }
}

tests();