Как вставить курсор в нужное место?

При клике на кнопку, в блок (с атрибутом contenteditable) помещается имя и оборачивается в элемент b и надо потом печатать после имени, если кликнуть потом в этот блок, то курсор не выходит за пределы элемента b и получается весь напечатанный текст будет тоже жирным, как вывести курсор за этот элемент?

Почему то selectionStart не работает.

HTML:

1. <p style="
2. padding: 10px;
3. background: white;
4. width: 50%;"
5.                  
6. contenteditable="true" class="write-comment"></p>

Код (Javascript):

1. var formComment = document.querySelector('.write-comment');
2. var userNameHtml = document.createElement('b');
3. userNameHtml.innerHTML = userName + ',&nbsp;';
4.                
5. formComment.appendChild(userNameHtml);
6. formComment.focus();
7. formComment.selectionStart = formComment.innerHTML.length;