範囲のクローニングが機能しない

Question

選択範囲を取得したら、そのクローンを作成して、選択範囲の元のコンテンツを消去します。なぜクローンオブジェクトはまだ影響を受けますか？

MozillaのAPIドキュメントを述べ--- https://plnkr.co/edit/A3TADtyyqkS6sI8ZJeaA?p=preview

<p id='test' contenteditable="true">hello world</p> 

function test() { 
    var r = document.getSelection().getRangeAt(0).cloneRange(); 
    console.log(r) 
    $('p').empty(); 
    console.log(r); 
} 

$(function() { 
    $('p').on('click', test) 
}) 

--- EDIT：が返さ私はここでは、コードです

（それがクローン化されたので）、それは独立しただろうと思いましたクローンは参照ではなく値によってコピーされるため、いずれかの範囲の変更は他のものに影響しません。

これはちょうどjqueryのempty（）メソッドのクールークですか？

Answer 1

私は少しGoogleを検索し、この解決策を見つけました。 お願いします。

function test() { 
    var range = document.getSelection().getRangeAt(0); 
    console.log(range) 
    var clone = range.cloneRange(); 
    console.log(clone) 
    range.collapse(true); 
    var markerElement = document.createElement("span"); 
    markerElement.appendChild(document.createTextNode("\ufeff")); 
    range.insertNode(markerElement); 
    var selection = window.getSelection(); 
    selection.removeAllRanges(); 
    selection.addRange(clone); 
    setTimeout(function(){ 
    markerElement.parentNode.removeChild(markerElement); 
    }, 250); 
}