我如何通过keydown事件在插入符号上插入元素？

Question

此功能不起作用，但是如果我在chrome中设置断点，它将成功运行，为什么？好奇怪......

function insertHtmlAtCursor() {
  var range=window.getSelection().getRangeAt(0);
  var node = range.createContextualFragment("<div>this is not show</div>");
  range.insertNode(node);
}

但是如果我更改代码，它总是以正确的方式运行。

  var node = document.createTextNode('this is ok.'); 

我在macOS中使用chrome，这是演示：

editor.onkeydown=editinput;
function editinput(e) {
  if(e.isComposing||e.keyCode===229) {
    return;
  }
  if(e.keyCode==32) {//space
  var range=window.getSelection().getRangeAt(0);
    var node=range.createContextualFragment('ttttttttttt');
    range.insertNode(node);
  }
}

* {
background-color: #353535;
color: #f3f3f3;
}

body,
html {
height: 100%;
background-color: #353535;
color: antiquewhite;
}

<div id="editor" contenteditable="true" class="knowleadge" tabIndex="1">
</div>

这是演示，当我键入空格时，它不会插入片段，但是当我在chrome中调试时，它将插入片段。

Answer 1

看起来两者都很好：

function insertHtmlAtCursor1() {
  var range=window.getSelection().getRangeAt(0);
  var node = range.createContextualFragment("<div>this is not show</div>");
  range.insertNode(node);
}
function insertHtmlAtCursor2() {
  var range=window.getSelection().getRangeAt(0);
  var node = document.createTextNode('this is ok.'); 
  range.insertNode(node);
}

.container {
  border: 1px solid black;
  background: #fefefe;
}

<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

<button onClick="insertHtmlAtCursor1()">Function 1</button>
<button onClick="insertHtmlAtCursor2()">Function 2</button>

您确定使用正确吗？到底是什么问题？