无法选择/突出显示动态div中的文本

Question

我有一个div，它的innerHTML是动态更新的（想象它像一个聊天室，每个新消息附加一个新段落）。

问题是，现在用户无法选择/高亮显示文本，因为每次更新div时都会改变选择。有时它会被清除，有时它会选择整个div。

最好是通过这个片段所示：

function modify(){ 
 
    document.getElementById('panel').innerHTML += "<p>Another message. Try to highlight me.</p>"; 
 
} 
 

 
setInterval(modify, 500);

.highlightable { 
 
    -webkit-user-select: text; 
 
    -moz-user-select: text; 
 
    user-select: text;    
 
}

<div id='panel' class='highlightable'> 
 
    
 
</div>

我试着添加CSS用户选择：文字，但没有运气。有任何想法吗？

Answer 1

的问题

在同innerHTML每一次操作，每次调用modify()是重写的panel内容。您突出显示的项目被删除并重新创建，因此它失去了重点。

解决方案

一个更好的方式来做到这将是为每个迭代一个新的元素和其追加到面板来代替。使用这种方法，您不必担心重写现有内容，因此您的亮点将保持不变。

function modify(){ 
 
    var panel = document.getElementById('panel'); 
 

 
    //Create a new <p> element 
 
    var newP = document.createElement('p'); 
 

 
    //Set its content 
 
    newP.innerHTML = 'Another message. Try to highlight me.'; 
 

 
    //Add it to panel 
 
    panel.appendChild(newP); 
 
} 
 

 
setInterval(modify, 500);

.highlightable { 
 
    -webkit-user-select: text; 
 
    -moz-user-select: text; 
 
    user-select: text;    
 
}

<div id='panel' class='highlightable'> 
 
    
 
</div>