多个<li>标签问题的选择/突出显示

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并继续在那里添加新的li标签

我想在不影响HTML的情况下突出显示所选范围。

有没有人知道如何阻止HTML行为不当并正确突出显示。

Answer 1

如果你只是想改变风格，你能不能只添加一个类？ 使用Javascript：

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

CSS

.red{
    background: red;
}