怎样删除.selected前面的文本节点？

我想单击按钮以后，.selected前后文本节点作轮流内容更换。
下面的代码每次点击都累计加上心得文本内容，如第一次点击是111，第二次点击不是222，而是111222，不是我想要的结果，请问怎样删除前面文本节点？貌似用jquery无法实现。
<body>
<script type="text/javascript" src="http://localhost/leb/auto/js/jquery-latest.js"></script>
<div>随机位置div</div>
<div>
<p>随机位置p</p>
<div class="selected">目标div，在此前后插入文本节点</div>
<ul>
<li>随机位置ul-li</li>
</ul>
</div>
<script>
var funclick=0;
var funArray = new Array(4);
funArray[0]=new Array(2);
funArray[0][0]="111";
funArray[0][1]="aaa";
funArray[1]=new Array(2);
funArray[1][0]="222";
funArray[1][1]="bbb";
funArray[2]=new Array(2);
funArray[2][0]="333";
funArray[2][1]="ccc";
funArray[3]=new Array(2);
funArray[3][0]="444";
funArray[3][1]="ddd";
// 前面插入 //
function preinsert(){
if(funclick<funArray.length-1){
funclick++;
}
else{
funclick=0;
}
$(".selected").before(funArray[funclick][0]);
}
// 后面插入 //
function afterinsert(){
$(".selected").after(funArray[funclick][1]);
}
</script>
<div>
<button onclick="preinsert()">前面插入</button>
<button onclick="afterinsert()">后面插入</button>
</div>
</body>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<body>
<script type="text/javascript" src="http://localhost/leb/auto/js/jquery-latest.js"></script>    <div>随机位置div</div>
    <div>
        <p>随机位置p</p>
        <div class="selected">目标div，在此前后插入文本节点</div>
        <ul>
            <li>随机位置ul-li</li>
        </ul>
    </div>
    <script>
        var funclick=0;
        var funArray = new Array(4);
        funArray[0]=new Array(2);
            funArray[0][0]="111";
            funArray[0][1]="aaa";
        funArray[1]=new Array(2);
            funArray[1][0]="222";
            funArray[1][1]="bbb";
        funArray[2]=new Array(2);
            funArray[2][0]="333";
            funArray[2][1]="ccc";
        funArray[3]=new Array(2);
            funArray[3][0]="444";
            funArray[3][1]="ddd";
        // 前面插入 //
        function preinsert(){
            if(funclick<funArray.length-1){
                funclick++;
            }
            else{
                funclick=0;
            }
            $(".selected").parent().contents().not("[nodeType=1]").eq(0).remove();
            $(".selected").before(funArray[funclick][0]);
        }
        // 后面插入 //
        function afterinsert(){
            $(".selected").parent().contents().not("[nodeType=1]").eq(1).remove();
            $(".selected").after(funArray[funclick][1]);
        }
    </script>
    <div>
        <button onclick="preinsert()">前面插入</button>
        <button onclick="afterinsert()">后面插入</button>
    </div>
</body>
谢谢hookee哥，这种方法我也想到过，但在这种情况下无法使用：.selected父节点本身含有其它的文本节点，这时候就无法用eq(0)才准确获取文本节点位置了。
还有一个奇怪的问题，就是你的代码运行过程会出现两个文本节点，就是111222，然后222333这样，怎样修正一下？
我测试下来，内发现你说的问题，是
333
目标div，在此前后插入文本节点
aaa
如果有其他文本要针对性修改了。或者简单点就加个span标签.
查了一下,发现用
nextSibling
previousSibling
可以获取前后文本节点的位置，但不知道怎么样删除，hookee哥帮忙看看怎么操作？
http://www.w3school.com.cn/xmldom/dom_nodes_navigate.asp
>>> $(".selected")[0].nextSibling
<TextNode textContent="aaa">
>>> $(".selected")[0].nextSibling.remove
>>> $(".selected")[0].nextSibling.removeChild()
[Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_PROP_ON_WN)" location: "JS frame :: file:///F:/leb%E7%BB%83%E4%B9%A0%E5%9C%BA/8-6/insert.html :: anonymous :: line 78" data: no]
[Break on this error] (78 out of range 47)insert.html (第 78 行)
>>> removeChild($(".selected")[0].nextSibling)
{ }
>>> removeChild($(".selected")[0].nextSibling)
{ }
>>> document.removeChild($(".selected")[0].nextSibling)
{ }
>>> documentElement.removeChild($(".selected")[0].nextSibling)
{ }
>>> xmlDoc.documentElement.removeChild($(".selected")[0].nextSibling) 全部都不行
这样就是用dom了，不是jquery了
IE :  $(".selected")[0].previousSibling.removeNode();
ff:
var obj = $(".selected")[0].previousSibling;
obj.parentNode.removeChild(obj);
firefox不行吗？
我在firefox下测试无效，我的程序必须用firefox的，有没有其他办法？
这一次就太完美了在此谢谢hookee哥。