problem removing input field node in IE

I’m working on a project that is meant to do the following:

When you click on a div on the page, the contents of the div are copied out, an input field with type = text is placed inside the div, then the previous contents of the div are placed inside the input field. When you click on the div again, the contents of the input field are copied out, the input field is removed, and the previous contents from the input field are copied back into the div.

Essentially, it’s meant to allow you to edit the contents of the div. The code that I have works flawlessly in Firefox and Chrome, but when I try it in IE 8, the second click simply removes the contents of the input field and leaves the input field in place. It is removing the node’s value rather than removing the node.

Here are my javascript functions:

[CODE]
function editField(strID, strField, strTable)
{
var el = document.getElementById(strID + strField);
var strText = el.firstChild.nodeValue;
el.removeChild(el.firstChild);

document.getElementById(strID + strField).setAttribute(“onClick”, ‘updateField(” + strID + ”, ” + strField + ”, ” + strTable + ”)’);

eInput = document.createElement(“input”);
eInput.setAttribute(“type”, ‘text’);
eInput.setAttribute(“id”, ‘editField’);
eInput.setAttribute(“value”, strText);

document.getElementById(strID + strField).appendChild(eInput);
}

function updateField(strID, strField, strTable)
{
var el = document.getElementById(‘editField’);
var strText = el.value;
el.parentNode.removeChild(el);

document.getElementById(strID + strField).setAttribute(“onClick”, ‘editField(” + strID + ”, ” + strField + ”, ” + strTable + ”)’);

document.getElementById(strID + strField).appendChild(document.createTextNode(strText));
}
[/CODE]

and here is my div:

[CODE]
<div id=”myDiv” onClick=”editField(‘mydiv’, ‘fieldName’, ‘tableName’)”>Text inside my div</div>
[/CODE]

Any thoughts?

Thanks!

Also in #JavaScript _↴