在网上找了好久，终于解决了这个问题。这里记录一下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试</title> <!-- 引入jQuery --> <script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script> <style type="text/css"> #div { border: 1px solid gray; width: 800px; height: 41px; } </style> </head> <body> <div id="div" contenteditable="true">点击按钮把图片拼接过来...</div> <button id="btn" onclick="btnClick()">光标聚焦到最后</button> <script type="text/javascript"> function btnClick() { //创建一个图片元素 var img = document.createElement('img'); img.src = '//www.baidu.com/img/baidu_jgylogo3.gif'; //把图片放到div里，并让光标聚焦到内容最后 var div = document.getElementById('div'); div.appendChild(img); //这里如果使用"div.focus()"，则光标总是出现在最前面 focusEnd(div); } //将光标聚焦到可编辑div内容末尾(el为DOM对象) function focusEnd(el){ el.focus(); if($.support.msie) { var range = document.selection.createRange(); this.last = range; range.moveToElementText(el); range.select(); document.selection.empty(); //取消选中 } else { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); //返回一个Selection对象，表示用户选择的文本范围或光标的当前位置 var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } </script> </body> </html>
参考链接：http://www.cnblogs.com/jonie-wong/p/5519822.html
