Javascript 为什么在ContentEditable中按内容末尾的enter键时复制DOM？

当我使用contenteditable制作web编辑器时，我遇到了一些奇怪的动作

如果我在contenteditable元素中按enter键，当前行的DOM将复制到下一行。然后再次按enter键，将再次复制DOM。 但这种情况只有在插入符号是内容结尾时才会发生。顺便说一下，只有文本内容不会出现。 我在最新的chrome浏览器上产生了这种情况

<div id="editor" contenteditable="true" style="border:1px solid #000; width:500px; height:200px;">
    <p><span class="name">content</span></p>
</div>

<div id="before" style="border:1px solid blue; width:500px; height:100px;"></div>
<div id="afterEnterKeyPressed" style="border:1px solid red; width:500px; height:100px;"></div>  

$('#editor').on('keyup', function(e) {
    var keyCode = e.keyCode;
    if (keyCode === 13) {
        $('#afterEnterKeyPressed').text($('#editor').html());
    }   
});

$('#before').text($('#editor').html());

内容

$（“#编辑器”）。在（'keyup'，函数（e）上{
var-keyCode=e.keyCode；
如果（键代码===13）{
$（'#afterEnterKeyPressed'）.text（$（'#editor'）.html（））；
}   
});
$（'before'）.text（$（'editor'）.html（））；

以下是演示：