michaellindahl michaellindahl - 2 months ago 18
Ajax Question

IE: Invalid target element - appending table using innerHTML + string

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">

Answer

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]);
Comments