Здраствуйте, подскажите пожалуйста как вставить цветной спан в редактируемый див. Мой код работает однако спанвставляется как текст а не спан
<div id="mydiv" contenteditable="true" tabindex="0"></div>
<style>
div{
width:25%;
height:25%;
background: green;
word-wrap: break-word;
overflow-y: auto;
}
span{
color: red;
}
</style>
<script>
document.getElementById("mydiv").addEventListener('keyup', event => {
document.getElementById("mydiv").append("<span style='color:red;'>red</span>");
}, true);
</script>
можно ли сделать какойто спан не редактируемым в редактироумом диве?