contenteditableにクラスアクティブな要素を追加してください

Question

私はこの集中要素にクラスを追加する必要があります。私がしようとしているのは、up/down矢印キーで移動中に、どの行がアクティブであるかを検出することです。
実際に私のコードはその機能を果たしますが、この集中要素にクラスを追加する方法はわかりません。
ありがとうございます！

var selectedElement = null; 
 
function setFocus(e) { 
 
    if (selectedElement) 
 
    selectedElement.style.outline = 'none'; 
 

 
    selectedElement = window.getSelection().focusNode.parentNode; 
 
    selectedElement.style.outline = '1px solid #f00'; 
 
}; 
 
document.onkeyup = setFocus; 
 
document.onmouseup = setFocus;

div:focus { outline: none; }

<ul contenteditable="true"> 
 
    <li>The first paragraph</li> 
 
    <li>The second paragraph</li> 
 
</ul>

Answer 1

はこれを試してみてください：ここで

はスニペットです

selectedElement.className += " active"; 

しかし、各メニュー項目にitarate、およびその他から削除することを忘れないでください。