I am trying to learn how to create my own external jQuery file to create a table. I found some code which looks good and have found out how to create the external file. I have added it to the head of the html page under the line that adds jQuery. Like this:

1. <script src="../js/jquery-3.4.1.min.js"></script>
   <script src="../js/my_table.js"></script>

I get no errors in the console.

I believe I can add some code to the head to call it on (document).ready and then add a div to the page. All my efforts do not work. I am unsure what to call the div and what to put in (document).ready and have tried all variations I can think of by looking at the jQuery code. Also is it possible to put the (document).ready in the external file itself in some way (other external files I have used do not require me to add (document).ready to the head)?

This is the code from the external jQuery file:

1. function createTable() {
   // create table
   var $table = $('<table>');
   // caption
   $table.append('<caption>MyTable</caption>')
   // thead
   .append('<thead>').children('thead')
   .append('<tr />').children('tr').append('<th>A</th><th>B</th><th>C</th><th>D</th>');
   
   
   //tbody
   var $tbody = $table.append('<tbody />').children('tbody');
   
   
   // add row
   $tbody.append('<tr />').children('tr:last')
   .append("<td>val</td>")
   .append("<td>val</td>")
   .append("<td>val</td>")
   .append("<td>val</td>");
   
   
   // add another row
   $tbody.append('<tr />').children('tr:last')
   .append("<td>val</td>")
   .append("<td>val</td>")
   .append("<td>val</td>")
   .append("<td>val</td>");
   
   
   // add table to dom
   $table.appendTo('#dynamicTable');
   }
   
   
   ( jQuery );

This is the css:

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