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()">