Setting the “value” attribute of a newly created LI element causes IE to crash
The Bug
If you programmatically set the “value” attribute of a newly created <li> element, Internet Explorer (IE) versions 5, 6 and 7 will crash without fail.
Here is the HTML source to my test page:
<html>
<head>
<title>IE Crash Example</title>
</head>
<body>
<button type="button" onclick="document.createElement('li').value = null;">null - Okay</button>
<button type="button" onclick="document.createElement('li').value = 0;">0 - Okay</button>
<button type="button" onclick="document.createElement('li').value = 1;">1 - Crash</button>
<button type="button" onclick="document.createElement('li').value = '1';">'1' - Crash</button>
<button type="button" onclick="document.createElement('li').value = true;">true - Crash</button>
<button type="button" onclick="document.createElement('li').value = 'true';">'true' - Okay</button>
<button type="button" onclick="document.createElement('li').value = false;">false - Okay</button>
<button type="button" onclick="document.createElement('li').value = [];">[] - Okay</button>
<button type="button" onclick="document.createElement('li').value = [1];">[1] - Crash</button>
<button type="button" onclick="document.createElement('li').value = ['1'];">['1'] - Crash</button>
<button type="button" onclick="document.createElement('li').value = ['true'];">['true'] - Okay</button>
<button type="button" onclick="document.createElement('li').value = {};">{} - Okay</button>
<button type="button" onclick="document.createElement('li').value = {count:1};">{count:1} - Okay</button>
<button type="button" onclick="document.createElement('li').value = undefined;">undefined - Okay</button>
<button type="button" onclick="document.createElement('li').value = function(){};">function(){} - Okay</button>
</body>
</html>
Interestingly, the crash happens when the value is set to a non-zero number, or evaluates to a non-zero number!
The Workaround
As the “value” attribute of the <li>element is deprecated, I suggest you avoid using it. But if you must, attach the <li> element to the DOM before manipulating it’s attributes, i.e.
var li = document.createElement("li");
ul.appendChild(li);
li.value = 1;
If you are using jQuery:
$("
<li/>").appendTo(ul).val(1);
But I suggest you store the value using the data function:
$("
<li/>").appendTo(ul).data("value", 1);
N.B. The bug has been fixed in IE 8.
