Problem with <span> tag in ckeditor

Hello,

My goal:

After enter some text in ckeditor i delete this text and create  <span>  tag with id and something style.

But when i enter some text in ckeditor, then i selecting this text and creating  <span>  tag

1) editor.insertElement("<span id="1" class="spanBlock">some text</span>");

but the created <span> don't have id for identification in JS code.

If i create element using this code:

2) var element = CKEDITOR.dom.element.createFromHtml("<span id="1" class="spanBlock">some text<span>");
    editor.insertElement( element );

or i create element using this code:

3) var node = document.createElement("span");

    node.appendChild(document.createTextNode("some text"));

    node.setAttribute("style", "background-color : #000000; color : #FFFFFF;");

    node.setAttribute("id","1");

    range.insertNode(node);

I have id and something style, but I have problem when i delete innerText in <span> tag. After deleting last symbol inner <span> tag, <span> tag removed himself and  in its place will be created <font> tag with <span> tag style, and all text in <font> tag become transparent  because  deleted <span> tag had border-color like text color in just created automatically <font> tag.

I attached 2 files before and after deleting text in span block

Thanks.