Solved: placing image in table cell with jquery

Hi experts,

This is my code so far
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <style type="text/css">
        #Table1 {
            width: 800px;
        }

        #row1 {
            height: 50px;
        }
        #row2 {
            height: 50px;
        }
        #row3 {
            height: 50px;
        }
        #row4 {
            height: 50px;
        }
        .col1 {
            width: 200px;
            font-family: Arial;
            font-weight: bold;
            font-size: 12px;
            border: 1px solid #b200ff;
            vertical-align: top;
        }
        .col2 {
            width: 200px;
            font-family: Arial;
            font-weight: bold;
            font-size: 12px;
            color: #006600;
            border: 1px solid #006600;
            vertical-align: top;
        }
        .col3 {
            width: 200px;
            font-family: Arial;
            font-weight: bold;
            font-size: 12px;
            color: #006600;
            border: 1px solid #123eeb;
        }
        .col4 {
            width: 200px;
            font-family: Arial;
            font-weight: bold;
            font-size: 12px;
            color: #006600;
            border: 1px solid #0094ff;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // -------------------
                                        

            // ---- On Page Load ---- 

            // http://stackoverflow.com/questions/28552516/append-image-to-td-via-jquery
            
            var img = document.createElement("img");
            img.src = "http://media.idownloadblog.com/wp-content/uploads/2014/12/Google-Drive-3.4-for-iOS-app-icon-small.png";

            $('#Table1').find(tbody).append("<td>" + img + "</td>");

            
            // ---- On Page Load ---- 
            

            // -------------------
        });
    </script>

</head>
<body>

        <div>
            <table id="Table1">
                <tr id="row1">                    
                    <td class="col1"></td>
                    <td class="col2"></td>        
                    <td class="col3"></td>  
                    <td class="col4"></td>      
                </tr>
                <tr id="row2">                    
                    <td class="col1"></td>
                    <td class="col2"></td>        
                    <td class="col3"></td>  
                    <td class="col4"></td>                                                      
                </tr>
                <tr id="row3">                    
                    <td class="col1"></td>
                    <td class="col2"></td>        
                    <td class="col3"></td>  
                    <td class="col4"></td>                                                      
                </tr>
                <tr id="row4">                    
                    <td class="col1"></td>
                    <td class="col2"></td>        
                    <td class="col3"></td>  
                    <td class="col4"></td>                                                      
                </tr>
            </table>
            <br />

        </div>

</body>
</html>
Open in new window
My code is incorrect. Its not working.

What i want is....
Using jQuery, On page load, place the image inside col4 of row1 of the table with id of Table1

Anyone know the syntax for that?