JavaScript IE appendChild() - Unexpected call to method or property access
I have been having this problem in IE. I have two divs which I use to drag selected elements from one to another. Lets say I have a child element (also a div) in div1 and some child elements in div2. I call the div2.appendChild() method on child element of div1. It removes the child from div1 and appends it to div2. If I then try to append the child back to div1 I get the following exception "Unexpected call to method or property access" in IE. It is working perfectly in firefox. See below code snippet for the javascript.
function moveSelectedGroupBoxItems(toLocation, grp){
document.body.className = 'groupBoxDefaultCursor';
if(groupBoxfromLocation != toLocation){
if(grp == groupBoxGroup){
var fromVal = document.getElementById(groupBoxfromLocation);
var toVal = document.getElementById(toLocation);
var children = fromVal.childNodes;
for (var i = children.length - 1; i >= 0; i--) {
if(children[i].className == 'groupBoxItemSelected'){
children[i].childNodes[0].name=toLocation;
toVal.appendChild(children[i]);
}
}
}
}
groupBoxfromLocation = '';
groupBoxGroup = '';
return false;
}
This basically moves the selected child divs from one parent div to another on dragging.
Answer
For search results benefits - I had this same error in IE 6 and 7 "Unexpected call to method or property access" when appending a child node to a namespaced element, but the namespace hadn't been declared.
var a=document.createElement("foo:blah");
var b=document.createElement("div");
a.appendChild(b); //Fails
To get around this, I had to add the namespace declaration either into the HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo>
or dynamically via javascript (Probably should be wrapped in try/catch):
var namespaces = document.namespaces;
if(namespaces) {
namespaces.add("foo", null, null);
}