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

Друзья, имеется такой пользовательский интерфейс.

<textarea> - туда юзер заносит текст, который отображается в <div class="text">

<select id="part"> - цвет текста частично - позволяет, чтобы юзер выделил часть текста <div class="text"> и установил цвет - метод createElement("span")

Однако, если в textarea юзер внесет изменения, createElement("span") сбрасывается, с точки зрения юзера - цвет всего текста снова становится черным (по умолчанию)

Что можно сделать для сохранения createElement("span")

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

$("#part").change(function () {
    var selectedText = window.getSelection ? window.getSelection() : document.selection.createRange();            
    if (selectedText.getRangeAt) {
        var range = selectedText.getRangeAt(0);
        var newNode = document.createElement("span");
                if ($(this).val() == 1) {
                          newNode.setAttribute('class', 'highlightedTextRed');
                        } 
                else if ($(this).val() == 2) {
                    newNode.setAttribute('class', 'highlightedTextBlue');}
                else  {
                newNode.setAttribute('class', 'highlightedTextWhite');}         
                range.surroundContents(newNode);
        }        
});