javascript - 将 html 插入到 contenteditable 中，但在其后添加新文本

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>

有什么方法可以在 span 标签之外开始输入文本，所以我最终会得到这样的结果

<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');
});