無法選擇/突出顯示動態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>