使用innerHTML +字符串的目标元素追加表无效

Question

在Internet Explorer中，这一行document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML = document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML + string;给了我一个SCRIPT600: Invalid target element for this operation. …character 10

字符串就是包含一组表的字符串。这在Chrome, Safari或Firefox中运行良好。有更好的方法吗?我所做的是一旦用户到达页面的底部，我将表添加到表中以加载更多内容。这是一种AJAX无限滚动类型的交易客户端请求。我正在使用Javascript，并且在这一点上更愿意使用Javascript，而不是为了这个任务而更改为jQuery。

更新也与:document.getElementById("left").innerHTML = document.getElementById("left").innerHTML + string;相同左边是<table id="left">

Answer 1

是的，你需要先像这样包装它们:

var div = document.createElement("div");
div.innerHTML = "<table><tbody>" + string + "</tbody></table>";
document.getElementById("left")
  .appendChild(div.firstChild.tBodies[0]);

Answer 2

当您需要在表的末尾插入一个表行时，方法略有不同。你的新代码，例如一个新的<tr>，应该在变量html中。

if (document.attachEvent) { //if using old IE
    var currentTable = document.querySelector("#myTable");
    var currentTableHTML = currentTable.outerHTML;
    //replace closing tag with new code + closing tag
    currentTableHTML = currentTableHTML.replace("</tbody>", html + "</tbody>";
    currentTable.parentNode.removeChild(currentTable);
    //reinsert the table before some other element - you can use something else if you have a container for the table
    document.querySelector("#someElement").insertAdjacentHTML("beforebegin", currentTableHTML);
}
else {
    //use insertAdjacentHTML in a normal browser
}