テキストの前後に要素を追加する

Question

選択したテキストの前後にいくつかの要素を作成できる関数を探しています。このようなものはjavascript replace selection all browsersと似ていますが、置き換える代わりに選択の前または後のコンテンツを追加する場合は、after()とbefore() jQueryメソッドのようにします。私はいくつかのDOMの選択方法を使用すべきでしょうか？あるいは、それを実行するのが簡単な何かが存在しますか？

MSIEで

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

： collapse所定の範囲と要素を

その他挿入するために使用pasteHTML：また collapse所与の範囲およびinsertNode

---

両方を介して要素を挿入collapse-methodsは、折りたたむ場所を定義するオプションの引数を受け入れます。 要素を最後に配置する場合は、最後まで折り畳んでください。