Question

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

Answer 1

这是执行此操作的一对功能。

实例：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中： collapse给定范围和使用pasteHTML插入元素

<强>其他：同样collapse给定范围并通过insertNode

插入元素

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

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

2 个答案: