note：inserNode()、compareBoundaryPoint()

insertNode() 把指定的节点插入文档范围的开始点

range对象的insertNode()方法，用于指定节点插入某个range对象所代表的区域中，插入位置为range对标所代表区域的起点位置，如果该点已经存在了页面当中，那该节点被移动到range对象所代表的起点处

语法：insertNode(newNode)

<script>
function onMouseUp(){
var btn =document.getElementById("btn");
var selection= document.getSelection();
if(selection.rangeCount >0){
var range = selection.getRangeAt(0);
range.insertNode(btn);
}
}
</script>

<div onmouseup="onMouseUp()" style="width:400px; background-color:#cccccc">
Create art. even if you're not an atrist!
</div>
<input id="btn" type="button"  value="button">

compareBoundaryPoints() 比较指定范围的边界点和当前范围的边界点，根据他们的顺序返回-1、0和1.比较哪个边界点由它的第一个参数指定，它的值必须是前面定义的常量之一

range对象的compareBoundaryPoint()方法用于比较两个range对象的起点位置或重点位置

<pre name="code" class="html"><script>
function testPlace(){
var blodTest = document.getElementById("blodTest");
var blodRange= document.createRange();
blodRange.selectNodeContents(blodTest.firstChild);
var selection = document.getSelection();
if(selection.rangeCount > 0){
var selRange=selection.getRangeAt(0);
if(selRange.compareBoundaryPoints(Range.START_TO_END,blodRange)<=0){
alert("front");
}else{
if(selRange.compareBoundaryPoints(Range.END_TO_START,blodRange)>0){
alert("back");
}
}
}
}
</script>
If you do not <b id="blodTest">leave</b> me, we, will die together
<input type="button" value="button" onclick="testPlace()">