Insert html into a contenteditable but add new text after it

Question

I have a contenteditable div, and a button that adds a simple span.

<button id="insert-span">Insert</button>
<div id="edit-box" contenteditable="true"></div>
<script>
    $('#insert-span').on('click', function() {
        document.execCommand('insertHTML', null, '<span class="inserted">Hi</span>');
    });
</script>

When I click the button, the span is correctly added to the div, but when I go to enter more text it is inside the inserted span, so I end up with this

<div id="edit-box" contenteditable="true">
    <span class="inserted">Hi and then all the other text I enter</span>
</div>

Is there any way start the entering of text outside the span tag, so that I end up with something like this

<div id="edit-box" contenteditable="true">
    <span class="inserted">Hi</span> and then all the other text I enter
</div>

Answer 1

I have no idea why you would do that but this should do it:

var text = document.createTextNode('your text after the span');
edit_box.appendChild(text);

Answer 2

Why don't you consider using the jquery prepend method here, since you're already using jQuery?

$('#insert-span').on('click', function() {     
    $('#edit-box').prepend('<span class="inserted">Hi</span> and then all the other text I enter');
});