javascript - 内容可编辑 Div，附加 HTML 导致问题。以编程方式附加 HTML 后键入的每个文本都会添加到最后一个 HTML 标记中

Question

我正在尝试制作一个可用于为应用程序生成消息模板的内容可编辑的 div。用户可以通过点击按钮将名称等字段的占位符附加到模板。也可以通过在其上打“x”来删除占位符。这是工作片段。

var removePlaceholder = function(e){
  e.parentNode.parentNode.removeChild(e.parentNode);
}

var appendPlaceHolder = function(field){
  var e = document.getElementById("t");
  e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span>')
}

.tag {
  background-color : blue;
  color : white;
}
.remove {
  color : red
}

<div id="t" contenteditable="true">Hello</div>

<button onclick=appendPlaceHolder("first_name")>Add first name</button>

contenteditable 部分工作得很好。但是在我使用 appendPlaceHolder 函数添加占位符之后，我键入的所有内容似乎都附加到最后插入的 HTML 元素。

我怎样才能避免这种情况。我已正确关闭标签。有什么办法可以改变这种行为。

要重现问题，请运行代码片段并点击“添加名字”按钮，然后继续在该区域输入。

更新

已添加图片说明情况

Answer 1

您可以做的是在附加占位符后添加一个空格:

JavaScript

var removePlaceholder = function(e){
  e.parentNode.parentNode.removeChild(e.parentNode);
}

var appendPlaceHolder = function(field){
  var e = document.getElementById("t");
  e.innerHTML += ('<span class="tag">{'+field+'}<span onclick=removePlaceholder(this) class="remove">x</span></span>&nbsp;')
}

注意:  在跨度末尾添加的只是创建一个空格。

实例

JSFiddle