In Internet Explorer this line document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML = document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML + string; is giving me a SCRIPT600: Invalid target element for this operation. …character 10

The string is simply that which contains a set of tablerows. This works fine in Chrome, Safari or Firefox. Is there a better way of doing this? What I am doing is once the user gets to the bottom of the page I am appending tablerows into the table to load more content. It's a sort of AJAX infinite scrolling type of deal - client requested. I am using Javascript and would prefer to stay with Javascript at this point and not change to jQuery just for this task.

Update also the same with: document.getElementById("left").innerHTML = document.getElementById("left").innerHTML + string; Also, left is <table id="left">

In Internet Explorer this line document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML = document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML + string; is giving me a SCRIPT600: Invalid target element for this operation. …character 10

The string is simply that which contains a set of tablerows. This works fine in Chrome, Safari or Firefox. Is there a better way of doing this? What I am doing is once the user gets to the bottom of the page I am appending tablerows into the table to load more content. It's a sort of AJAX infinite scrolling type of deal - client requested. I am using Javascript and would prefer to stay with Javascript at this point and not change to jQuery just for this task.

Update also the same with: document.getElementById("left").innerHTML = document.getElementById("left").innerHTML + string; Also, left is <table id="left">

• javascript
• ajax
• internet-explorer
• infinite-scroll

• 5 You can't set the innerHTML of a table, table section or table row element in IE. You can use innerHTML to write an entire table, or just the content of a cell. Use DOM methods. PS. Ajax "infinite scrolling" pages are a pet hate since they have serious usability issues. – RobG Commented Mar 1, 2013 at 0:38
• @RobG I think what you are suggesting (your first two sentences seem to conflict) is what I just tried: to rewrite the entire table with innerHTML. Secondly, I believe I am using DOM methods. Are you saying that I must create the additional rows via the DOM and not a string? Finally infinite scrolling is client requested. – michaellindahl Commented Mar 1, 2013 at 0:44
• @RobG well I attempted to write out the code all in DOM but newLink.onclick = function() { toggleVote() }; did not want to listen to me. @KernelJames has a great solution. Would you agree? – michaellindahl Commented Mar 1, 2013 at 1:30
• 1 —the first two sentences aren't contradictory. Yes, KernelJames' answer is fine as it writes an entire table using innerHTML, then uses standard DOM to transfer the new bits to the existing table. Check that the extra tbody elements aren't going to be an issue (they are fine per HTML, but other code might not expect multiple table bodies). What clients ask for isn't always sensible. :-( – RobG Commented Mar 1, 2013 at 5:51

2 Answers 2

Yes you will need to wrap them first like this:

var div = document.createElement("div");
div.innerHTML = "<table><tbody>" + string + "</tbody></table>";

document.getElementById("left")
  .appendChild(div.firstChild.tBodies[0]);

Slightly different way for when you need to insert a table row at the end of the table. Your new code, e.g. a new <tr>, should be in the variable called 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
}