Выделение текста

let text = window.getSelection();
if (text.toString() !== '' ) {
let start = text.anchorOffset;
let end = text.focusOffset - text.anchorOffset;
let range = window.getSelection().getRangeAt(0);
let selectionsContents = range.extractContents();
this.span = document.createElement('span');
this.hint = document.createElement('div');
this.hint.innerHTML = '<div class="saveQuote" ' +
'style="margin-right: 10px; cursor: pointer">Сохранить</div>' +
' <div class="cancelQuote" style="cursor: pointer">Отменить</div>';
this.span.setAttribute("class", "test");
this.hint.setAttribute("style", "white-space: no-wrap; box-shadow: 0 0 4px 4px white ;" +
" user-select: none; font-weight: 500;font-size: 15px;text-transform: capitalize!important;" +
"word-wrap: break-word!important;" +
"background-color: white; display: flex; position: absolute; border: 1px solid grey;" +
" border-radius: 5px; top: -35px; right: 0; padding: 4px 8px");
this.span.style.display = 'inline-block';
this.span.style.position = 'relative';
this.span.style.backgroundColor = 'yellow';
this.span.appendChild(selectionsContents);
this.span.appendChild(this.hint);
range.insertNode(this.span);

<p>aaaAaaaaaaaa</p> <p>bbbbbbbbBbbbb </p>
если я выделяю в спан текст от A до B, то получается
<p>aaa</p><span>Aaaaaaaaa</span></p> <p><span>bbbbbbbbBbbbb</span></p> таким образом.
в итоге,перед спаном появляется новый перенос из-за закрытия </p>