JSFiddle - React, Tailwind, and code Playground

HTML

<table class="grid" border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr>
        <td>Content 1</td>
        <td>Content 2</td>
    </tr>
</table>

JavaScript

$(function() { 
  
  // a random DIV defintion 
  var div = $('<div>Test</div>');

  // put some color to all TDs
  $('.grid td').css('background-color', 'yellow');  
    
  // some CSS for the DIV for better visibility      
  div.css('width', '200px')
     .css('height', '500px')
     .css('background-color', '#5588FF');
    
  // This does not work, because for some reason the TABLE tag 
  // itself does not belong to the class "grid" ...
  // var table = $('.grid table');

  // ... so we have to get the table this way 
  var table = $('.grid tr:first').parent();
  
  // remove the comment to see, that this would work  
  // so "table" seems to be a valid element !  
  // table.hide(1000);  
    
  // this does NOT work properly in IE 8 (it does in Mozilla), but if you write it 
  // like "$('table').wrap(div);" it does !
  //
  // Additionally, the tables BORDER attribute applies to the DIV in Mozilla
  //
  // In my opinion "$('.grid tr:first').parent()" and "$('table')" reference the
  // same TABLE tag 
  table.wrap(div);  
    
})