Clearing contents of HTMLTableElement

I have the following table element:

<table id="my-table" class="table table-striped table-hover ">Loading...</table>

I am dynamically creating the table inside of an ajax call, and then writing the data to the table:

<script>
$.ajax({
   success:function(result){
    $.getScript("table-sort-controller.js", function () {
        sortTable("my-table")
    }); //makes table sortable using DataTables
    $.getScript("search-controller.js"); //makes table searchable using DataTables
   },
    url: "http://myserver:8080/url/"
    }).then(function(data) {
    var table = "<thead>";
    table += createTableHeader(data);  //fake method to simplify code
    table += "</thead>";
    table += "<tbody id='sortable-cells'>";
    table += createTableBody(data);  //fake method to simplify code
    table += "</tbody>";
    //This is the line where I try to clear "Loading...".
    document.getElementById("my-table").innerHTML = table;
});
</script>

However, I am failing to remove "Loading..." from on top of the loaded table. I have tried the following in the line directly after my table creation:

document.getElementById("my-table").innerHTML = "";
document.getElementById("my-table").empty();
//a few other attempts I cannot remember

Some more info:

alert(document.getElementById("my-table")); //output is [object HTMLTableElement]
alert(document.getElementById("my-table").innerHTML); //output is empty alert
alert(document.getElementById("my-table").getCaption()); //console says "undefined is not a function"

I am unclear as to why getCaption() returns undefined, as it appears to be a function under W3C.

How can I remove "Loading..." after my table has finished loading and before I populate #my-table with the appropriate HTML? Alternatively, how can I removing "Loading..." immediately after writing my table?