Create html table dynamically

Create html table dynamically

How do I create html table dynamically?

Here is my code:

html code:

    <div id="dynamicTable">
    </div>

jquery code:

        function createTable() {
            $("#dynamicTable").append("<table>");
            $("#dynamicTable").append("<caption>My table</caption>");
            $("#dynamicTable").append("<thead>");
            $("#dynamicTable").append("<tr>");
            $("#dynamicTable").append("<th>A</th>");
            $("#dynamicTable").append("<th>B</th>");
            $("#dynamicTable").append("<th>C</th>");
            $("#dynamicTable").append("</tr>");
            $("#dynamicTable").append("</thead>");
           
            $("#dynamicTable").append("<tbody>");

            $("#dynamicTable").append("<tr>");
            $("#dynamicTable").append("<td>what</td>");
            $("#dynamicTable").append("<td>now</td>");
            $("#dynamicTable").append("<td>cow</td>");
            $("#dynamicTable").append("</tr>");

            $("#dynamicTable").append("<tr>");
            $("#dynamicTable").append("<td>bach</td>");
            $("#dynamicTable").append("<td>v</td>");
            $("#dynamicTable").append("<td>dang</td>");
            $("#dynamicTable").append("</tr>");

            $("#dynamicTable").append("</tbody>");
            $("#dynamicTable").append("</table>");

            $('#dynamicTable table').addClass("dynamicTable");
            $('#dynamicTable table thead').addClass("dynamicTableTh");
            $('#dynamicTable table tbody td').addClass("dynamicTableTd");
        }

css code:

        .dynamicTable { font:.7em Arial; border:1px solid gray; }
        .dynamicTableTh { background-color:#584df0; color:White;}
        .dynamicTableTd { padding:3px; width:90px; color:red }



The table is rendered; but no css is applied.