選択/ハイライト

Question

は私JsFiddleです：

Highlight issue after selecting text across multiple li tags

、その中で、私は後にここでテキスト

var range = window.getSelection().getRangeAt(0); 
content = range.extractContents(); 
span = document.createElement('SPAN'); 
span.className='startIndex-'+startIndex+' endIndex-'+endIndex+''; 
span.style.background = 'pink'; 
span.appendChild(content); 
var htmlContent = span.innerHTML; 
range.insertNode(span); 

を強調するためにスパンを追加し、次のコードを使用しています複数のliの間でテキストを選択すると、選択したテキストの開始インデックスと終了インデックスをonclick関数に渡します。

しかし

後にそこに新しいのliタグを追加するには、新しい李に選択されたコンテンツを破壊し続けてhighligtingながらボタンをクリックした後、私はHTMLに影響を与えることなく、選択した範囲をハイライト表示します。

HTMLを誤動作させて正しく強調表示する方法を知っている人はいませんか？

Answer 1

スタイルを変更したいだけの場合は、クラスを追加するだけでいいですか？
Javascriptを：

 var el = document.getElementById('hello'); 
    el.className ="red" 

CSS

.red{ 
    background: red; 
}