Как изменить цвет строки перед ее вставкой в ​​текущую позицию курсора

Question

Я получаю этот результат при попытке изменить цвет строки, которую хочу добавить в свой редактор.
Часть css не принимается во внимание. Он добавляется как простой html. В чем может быть проблема?

some text <font color="green">ADD THIS VALUE</font> some text  and ...

Вот функции добавления

function add_str(event) {
  event.preventDefault()
  var elt = document.getElementById("text_write");
  insertAtCursor(elt, "ADD THIS VALUE");
}

function insertAtCursor(myField, myValue) {
  myValue = myValue.fontcolor("green");
  if (myField.setRangeText) {
    myField.setRangeText(myValue)
  } else {
    document.execCommand('insertText', false, myValue);
  }
}

и html часть

<button onmousedown="add_str(event)">
add srting
</button>

<div contenteditable="true" id="text_write" style="height:200px; width:500px; border:2px solid black;">some text some text  and ...</div>

Заранее спасибо

Answer 1

function add_str(event) {
  event.preventDefault()
  var coloredstring = "ADD THIS VALUE"
  var colorofstring = "green"
  var node = document.getElementById("text_write")
  var addedstring = '<span style="color:' + colorofstring + '">' + coloredstring + '</span>'
  node.innerHTML = node.innerHTML + addedstring
}

<button onmousedown="add_str(event)">
add srting
</button>

<div contenteditable="true" id="text_write" style="height:200px; width:500px; border:2px solid black;">some text some text  and ..</div>

тег шрифта больше не работает на html5, я немного взломал, используя тег span