createElement(“span”) сбрасывается при добавлении текста

Question

Друзья, имеется такой пользовательский интерфейс.
- туда юзер заносит текст, который отображается в 
- цвет текста частично - позволяет, чтобы юзер выделил часть текста  и установил цвет - метод createElement("span")
Однако, если в textarea юзер внесет изменения, createElement("span") сбрасывается, с точки зрения юзера - цвет всего текста снова становится черным (по умолчанию)
Что можно сделать для сохранения createElement("span")
https://jsfiddle.net/Nata_Hamster/jbs3wyfv/48/
Заранее спасибо.

user_19048941 · Accepted Answer

https://jsfiddle.net/jbs3wyfv/50/
Когда мы присваиваем innerHTML новое значение, то старое теряется. Естественно вместе с ним пропадают и созданные спаны. 
Вариант решения "в лоб" - добавляем в конец innerHTML столько символов с конца, насколько длиннее textarea после очередного ввода. Вариант будет работать только для ввода новых символов, если стереть или поменять что-то в ранее введенном тексте, то все сломается.

sergei_zhakov · Answer

надо ставить +=
замените на этот текст 
document.getElementById('descriptionPh5').innerHTML += ...т д ");

gdsgs_fdsfds · Answer

не понял чё нужно то?

CreateElement(“span”) сбрасывается при добавлении текста