range.extractContents() sometimes only pick innerHTML only the whole document fragment if only one character selected

[lishiying410]

I have some text for user to select, like:

    <span onmouseup="top.onMouseUpEssence('534','');" name="534">h</span>
    <span onmouseup="top.onMouseUpEssence('534','');" name="534">e</span>
    <span onmouseup="top.onMouseUpEssence('534','');" name="534">r</span>
    <span onmouseup="top.onMouseUpEssence('534','');" name="534">e</span>

When user selects character 'e', some times the extractContents method only returns innerHTML 'e', not<span onmouseup="top.onMouseUpEssence('534','');" name="534">e</span>

Here is my code:

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var container = document.createElement("span");
var selectionContents = range.extractContents();
container.appendChild(selectionContents);

Does any one know why? Thanks. I tested Firefox, it's sometimes working, for chrome, it's not working at all when only one character is selected.