appendChild probably keeps hover css state in IE9 - css

Question

I am strugling to make a simple function work in IE9. It works perfectly in Chrome and FF.
The purpose is to have 2 "ul" lists and move "li" elements between them, on click.
I would like to have li elements with blue background in the first container (MultiListAvailableElements), changing to green on mouse over. And opposite in the second container (MultiListSelectedElements) - green background, changing to blue on mouse over.
The problem is that in IE9 element's behave like they never loose hover state after I append them to opposite list. I have to move mouse over them (and out) to make them look like they should. So, for example, I click blue element from first container, it moves to second container and is still blue (blue in the second container is only for hover state, it should be green by default as the mouse is no longer over the element because the element has moved to different place). Then I have to move mouse over and out the elements in second container to make them come back to normal (green color).
HTML:
<div style="height: 210px; width: 600px;">
<div class="MultiListAvailableElements">
<ul id="OptionsUL">
<li id="id1" onclick="MLAdd(this)">1</li>
<li id="id2" onclick="MLAdd(this)">2</li>
<li id="id3" onclick="MLAdd(this)">3</li>
<li id="id4" onclick="MLAdd(this)">4</li>
<li id="id5" onclick="MLAdd(this)">5</li>
</ul>
</div>
<div class="MultiListSelectedElements">
<ul id="SelectedUL">
</ul>
</div>
</div>
CSS:
/* ------------------------------------ Available Elements --- */
.MultiListAvailableElements {
overflow-y: scroll;
width: 250px;
height: 200px;
border: 1px solid black;
}
.MultiListAvailableElements ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.MultiListAvailableElements ul li {
background-color: #e5ecff;
border: 1px solid #c3caff;
width: 180px;
text-align: center;
margin-bottom: 2px;
padding: 2px;
cursor: pointer;
cursor: hand;
font-family: arial;
font-size: small;
}
.MultiListAvailableElements ul li:hover {
background-color: #e5ffec;
border: 1px solid #a3ffaa;
}
/* ------------------------------------ Selected Elements --- */
.MultiListSelectedElements {
overflow-y: scroll;
width: 250px;
height: 200px;
border: 1px solid black;
}
.MultiListSelectedElements ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.MultiListSelectedElements ul li {
background-color: #e5ffec;
border: 1px solid #a3ffaa;
width: 180px;
text-align: center;
margin-bottom: 2px;
padding: 2px;
cursor: pointer;
cursor: hand;
font-family: arial;
font-size: small;
}
.MultiListSelectedElements ul li:hover {
background-color: #e5ecff;
border: 1px solid #c3caff;
}
JavaScript:
function MLAdd(Obj) {
document.getElementById("SelectedUL").appendChild(document.getElementById(Obj.id));
document.getElementById(Obj.id).onclick = function () { MLDel(Obj); }
}
function MLDel(Obj) {
document.getElementById("OptionsUL").appendChild(document.getElementById(Obj.id));
document.getElementById(Obj.id).onclick = function () { MLAdd(Obj);
}

Answer 1

You don't actually have to clone. Just remove it and append it elsewhere. Also, you don't have to request the element from the DOM because you are already passing it as an argument to the function (it's coming from the this in the original function call).
function MLAdd(Obj) {
Obj.parentNode.removeChild(Obj);
document.getElementById("SelectedUL").appendChild(Obj);
Obj.onclick = function () { MLDel(Obj); }
}
I'd also cache the results of document.getElementById("SelectedUL") as well by setting it in a variable from within a closure, but I'll leave that for you to figure out.