<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script>
function ShowDiv()
{
var span = document.getElementById("s");
span.innerHTML = span.innerHTML.replace("<IMG src=\"shuqian.png\" tag=\"true\">", "")
var txt = document.selection.createRange();
txt.pasteHTML(txt.text + "<img src=\"shuqian.png\" tag=\"true\" />");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseup="ShowDiv();" id="s">快使用双节棍 狠狠哈嘿 快使用双节棍 狠狠哈嘿<br /> 习武之人切记 仁者无敌 是谁在练太极风声水起<br />快使用双节棍 狠狠哈嘿 快使用双节棍 狠狠哈嘿<br /> 习武之人切记 仁者无敌 是谁在练太极风声水起</span>
<br /><br />
<span>sdasdadasdasdasdasdads</span>
</div>
</form>
</body>
</html>目的是这样的
利用document.selection.createRange()在选中的字后面插入图片
不过在做这个事之前，需要把容器内的已有的相同图片清除，但是一旦用了
span.innerHTML = span.innerHTML.replace("<IMG src=\"shuqian.png\" tag=\"true\">", "")
就会导致document.selection.createRange()选取的文本有问题，变成整个容器了。不知道有没有办法解决
（如果测试的话替换代码里的Img的src要手动设置下加个http://....）
原因是innerHMTL赋值后，原来的html内容发生变化导致document.selection.createRange()不能获取
鼠标选择的内容。所以图片才跑到最前面了
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script>
function ShowDiv()
{
var span = document.getElementById("s");
var imgStr = "<IMG src=\"http://avatar.profile.csdn.net/D/7/3/2_hahanan1987.jpg\" tag=\"true\">";
var txt = document.selection.createRange();
var temp = "!#flag!" +txt.text+imgStr+"!flag#!";
txt.pasteHTML(temp);
var content = span.innerHTML; var ary = content.split(temp); content = ary[0].replace(imgStr, "") + temp + ary[1].replace(imgStr, "");
span.innerHTML = content.replace("!#flag!", "").replace("!flag#!", "");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span onmouseup="ShowDiv();" id="s">快使用双节棍 狠狠哈嘿 快使用双节棍狠狠哈嘿<br /> 习武之人切记 仁者无敌 是谁在练太极风声水起<br />快使用双节棍 狠狠哈嘿 快使用双节棍狠狠哈嘿<br /> 习武之人切记 仁者无敌 是谁在练太极风声水起</span>
<br /><br />
<span>sdasdadasdasdasdasdads</span>
</div>
</form>
</body>
</html>