I have a table in HTML with a few rows.
I originally gave some of those table rows (TR) an ID and I would use javascript to set the INNERHTML of some of these table rows with some new dynamic content.
However, Internet Explorer doesn't like this and gives an 'unknown runtime error' because I am trying to set the INNERHTML of an inline element.
So now, I'm attempting to instead replace the entire table row child with a new one. I can't simply appendChild because I need the new table row to be in the same position as the original (to imitate as if just this table row's content had been changed when in reality, the entire row is being 'replaced').
Was hoping someone had a solution to this (I was thinking a) get child position b) delete original table row and c) insert new table row at child position found in A). Perhaps there is even an easier and better solution? Would love some input.
Cheers!
It's innerHTML, not INNERHTML.
IE doesn't much like table manipulation via innerHTML. You can do this:
var oldrow = document.getElementById('the_id');
var newrow = document.createElement('tr');
// add cells to the new row
var newcell = document.createElement('td');
newcell.innerHTML = "content";
newrow.appendChild(newcell);
// ... ... ...
// Replace the old row with the new one:
oldrow.parentNode.insertBefore(newrow, oldrow);
oldrow.parentNode.removeChild(oldrow);
newrow.id = 'the_id';
Off-topic: Issues like this are part of why I usually recommend using a library like jQuery, Prototype, YUI, Closure, or any of several others to smooth over browser oddities and provide additional basic functionality that the DOM itself doesn't give you. This lets you focus on the actual problem you're solving, rather than the arcana of browser pitfalls.
Decided to append a child row AFTER the current row, and delete the old row. Most efficient method I could think of.