I am currently battling an IE JavaScript/DOM bug (what fun) and it has truly stumped me. The code in question copies some checkboxes into a form and needs to maintain their checked state. Problem is, IE (specifically IE8, though I'm guessing others as well) doesn't want to do that.
I've narrowed down the bug itself to a very small test case. Basically, things work correctly without a DOCTYPE on the page but they are broken when a DOCTYPE is present. I would have expected the opposite, but who knows with IE.
Following are the simplest possible test cases. For each of them: open the page in IE, toggle the checkbox, then click "TEST".
Does not produce the bug:
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
Produces the bug:
<!DOCTYPE html>
<input type="checkbox" id="broken">
<button id="break">TEST</button>
<script>
document.getElementById('break').onclick = function() {
alert(document.getElementById('broken').outerHTML);
};
</script>
The bug occurs on valid pages (with <html>, <head>, <body>, etc) and whether or not the input is inside a form. In the "broken" case, outerHTML always reflects what was present on page load (if I have the input checked by default then it always alerts code with CHECKED, even if I uncheck it first). Things happen the same way if I wrap the input and use innerHTML. On the actual site I am using jQuery's .clone() method to do the copying; .clone() uses .outerHTML internally and that's how I narrowed this down.
My question is this: is there a way around this short of manually building new HTML myself? And does anyone have any idea WHY this happens in the first place (other than "IE SUX LOLZ")?