javascript - contenteditableにhtmlを挿入しますが、その後に新しいテキストを追加します

Question

contenteditable div と、単純なスパンを追加するボタンがあります。

<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>

ボタンをクリックすると、スパンがdivに正しく追加されますが、さらにテキストを入力すると、挿入されたスパン内にあるため、このようになります

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

このような結果になるように、スパンタグの外側にテキストの入力を開始する方法はありますか

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

Answer 1

なぜそれをするのかわかりませんが、これでうまくいくはずです：

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

Answer 2

すでに jQuery を使用しているので、ここで jquery prepend メソッドの使用を検討してみませんか?

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