IE can't set innerHTML of object to empty

Question

Hello i have such problem, i need to make empty some of my elements in document, when i am trying to do this in IE 11 it fails with error Unknown runtime error on 3rd line.
js

var element = document.getElementById('sum');
alert(element.innerHTML);
element.innerHTML = '';

and html

<table>
<thead></thead>
<tbody id="sum">
</tbody>
</table>

In alert i see <TBODY></TBODY>. This code works in google chrome and firefox, but not in IE, how i can fix this problem?
Thank you for help.

this is the same issue as this: http://stackoverflow.com/q/4729644/20126 — Amr Elgarhy, Nov 06 '14 at 09:35
It's an IE specific problem, where you can't adjust the innerHTML of table/tbody etc. Depending on your specific layout either go up a layer and clear the table from its container/ use table specific methods like removerow/ use node.removeChild. Personally I'd use the last: `element.parentNode.removeChild(element)` and then add a new body element — nepeo, Nov 06 '14 at 09:36

score 0 · Answer 1 · answered Nov 06 '14 at 09:33

The innerHTML property has some problems in IE when trying to add or update form elements, the workaround is to create a div and set the innerHtml property on that before appending to the DOM:

var newdiv = document.createElement("div");
newdiv.innerHTML = xmlhttp.responseText;
var container = document.getElementById(id);
container.appendChild(newdiv);

IE can't set innerHTML of object to empty

1 Answers1