清除 HTMLTableElement 的内容

Question

我有以下 table 元素：

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

我在 ajax 调用中动态创建 table，然后将数据写入 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>

但是，我无法从已加载的 table 上删除 "Loading..."。我在 table 创建后直接在行中尝试了以下内容：

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

更多信息：

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"

我不清楚为什么 getCaption() returns 未定义，因为它似乎是 W3C.

下的函数

如何在我的 table 完成加载后和用适当的 HTML 填充 #my-table 之前删除 "Loading..."？或者，如何在写 table 后立即删除 "Loading..."?

Answer 1

感谢@Phylogenesis 和@Paul Roub，修复了它！

我改了

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

至

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

然后我添加了以下内容以删除我的旧 "Loading..."。

$('#my-table').empty();

现在可以了。谢谢！

编辑：在我的特殊情况下，我实际上能够完全删除清除调用，因为我在下一行中覆盖了元素。

清除 HTMLTableElement 的内容

Clearing contents of HTMLTableElement

html

javascript

ajax

jquery

overwrite