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

Question

Я пытаюсь изменить цвет строки перед добавлением ее в div. Но часть css не учитывается. Он добавляет

<span style="color:green">ADD THIS VALUE</span> 

в позиции курсора, а не только добавляет ADD THIS VALUE синим
Что мне не хватает? Вот фрагмент кода.

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>'
  insertAtCursor(node, addedstring);
}

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

<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

изменить insertText на insertHTML:

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>'
  insertAtCursor(node, addedstring);
}

function insertAtCursor(myField, myValue) {
  if (myField.setRangeText) {
    myField.setRangeText(myValue)
  } else {
    document.execCommand('insertHTML', false, myValue);
  }
}

<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>