javascript - 无法选择/突出显示动态 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 user-select:text 但没有成功。有什么想法吗？

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>