選択したテキストの前後にいくつかの要素を作成できる関数を探しています。このようなものはjavascript replace selection all browsersと似ていますが、置き換える代わりに選択の前または後のコンテンツを追加する場合は、after()
とbefore()
jQueryメソッドのようにします。私はいくつかのDOMの選択方法を使用すべきでしょうか?あるいは、それを実行するのが簡単な何かが存在しますか?テキストの前後に要素を追加する
6
A
答えて
10
ここには、これを行うための機能があります。
ライブ例: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);
})();
2
: collapse所定の範囲と要素を
その他挿入するために使用pasteHTML:また collapse所与の範囲およびinsertNode
両方を介して要素を挿入collapse-methodsは、折りたたむ場所を定義するオプションの引数を受け入れます。 要素を最後に配置する場合は、最後まで折り畳んでください。
関連する問題
- 1. HTML要素の前または後にテキストを追加する
- 2. htmlスパン要素の後にテキストを追加する
- 3. 配列の最後の要素に要素を追加する
- 4. .After()で要素の後に要素を追加すると、前に追加した要素が追加されます。 (JQuery)
- 5. 要素の前に要素を追加します
- 6. wp_nav_menuをカスタマイズしてサブメニュー要素の前にテキストを追加する
- 7. 最後の要素にCSSを追加
- 8. リストの最後の要素の前に "and"を追加するには?
- 9. CKEditor要素を別の要素の前に追加
- 10. クラスが追加された後の要素テキスト値の取得
- 11. 要素を別の要素に追加した後のJqueryダブルクリックイベント
- 12. 要素を要素に追加する
- 13. imgの後に "</a>"をjQueryで追加すると、要素の前に追加されます
- 14. 要素をDOMに追加する前に要素を削除します
- 15. は、UL要素にLI要素のテキストからクラスを追加する方法
- 16. divのテキストの途中にアンカー要素を追加するjQuery
- 17. ウィンドウオープナの操作。親ウィンドウの要素にテキストを追加する
- 18. キャンバスシャドーを漢字に追加するテキスト要素のみ
- 19. 要素の値にテキストを追加する
- 20. 閉じるタグの前に要素を追加するジアゾルール
- 21. 名前のリストにdata.framesの要素を追加するR
- 22. JTableの前と後のテキストを追加する
- 23. ギアVRフレームワーク(GearVRF):360ビデオの前に要素を追加する
- 24. スワックメッセージに名前空間のない要素を追加する
- 25. 要素をスクリプトで追加した後にjqueryクラスを追加するには?
- 26. jqueryを使用して、追加された要素の最後に要素を追加する方法は?
- 27. はinputタグからdiv要素にテキストを追加し、その後
- 28. XSLTのレコードの最後に要素を追加する方法
- 29. jQuery;要素にコードとテキストを追加する
- 30. テキスト要素に空白を追加する
ない答え、しかし:私はあなたが使用してかなり簡単にこれを行うことができます賭けるティム・ダウン[Rangy](http://code.google.com/p/rangy /)ライブラリ。 –