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 οnmοuseup="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" οnclick="testPlace()">