在文本选择之前/之后添加元素

我正在寻找允许我在选定文本之前或之后构建一些元素的函数。 类似这样的一个javascript替换选择所有浏览器，但是在选择之前或之后添加一些内容而不是替换它，比如after()和before() jQuery方法。 我应该使用一些DOM选择方法，如果是哪一个？ 或者确实存在更容易实现的东西？

Answer 1

这是一对执行此操作的function。

实例： http ： //jsfiddle.net/hjfVw/

码：

 var insertHtmlBeforeSelection, insertHtmlAfterSelection; (function() { function createInserter(isBefore) { return function(html) { var sel, range, node; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = window.getSelection().getRangeAt(0); range.collapse(isBefore); // Range.createContextualFragment() would be useful here but is // non-standard and not supported in all browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); } range.insertNode(frag); } } else if (document.selection && document.selection.createRange) { // IE < 9 range = document.selection.createRange(); range.collapse(isBefore); range.pasteHTML(html); } } } insertHtmlBeforeSelection = createInserter(true); insertHtmlAfterSelection = createInserter(false); })(); 

Answer 2

在MSIE中： 折叠给定范围并使用pasteHTML插入元素

其他：也折叠给定的Range并通过insertNode插入元素

---

这两个collapse-methods都接受一个可选参数，该参数定义了要折叠到的位置。 如果要将元素放在最后，则折叠到最后，否则直到开始。