In short, a script using the Dojo framework ends up with different results on IE.
Here is a sample page demonstrating the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.connect(document.body, "onload", function () {
var d = dojo.query("div");
var s = dojo.query("span");
dojo.empty(d[0]);
dojo.create("span", {innerHTML: s[0].innerHTML}, d[0]);
});
</script>
</head>
<body>
<div><span>foobar</span></div>
</body>
</html>
Don’t bother trying it over at jsFiddle, this particular case does not reproduce over there.
Sample should output foobar but on IE it does not.
Why does this happen and is there a way around it?
After some digging and debugging I managed to track the issue down to the internals of Dojo:
As can be seen from above code, IE gets a special case but unfortunately it is not functionally equivalent – things end up different.
Not sure if this is a bug but certainly a feature of questionable merit. A workaround is to run
dojo.clone()oninnerHTMLbefore invokingdojo.empty():