Javascript 内容可编辑Div，追加导致问题的HTML。通过编程附加HTML后键入的每个文本都会添加到最后一个HTML标记中

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

var removepholder=函数（e）{
e、 parentNode.parentNode.removeChild（e.parentNode）；
}
var appendPlaceHolder=函数（字段）{
var e=document.getElementById（“t”）；
e、 innerHTML+=（'{'+字段+'}x'）
}

.tag{
背景颜色：蓝色；
颜色：白色；
}
.移除{
颜色：红色
}

你好

---

添加名字您可以在添加占位符后添加一个空格：

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

var removepholder=函数（e）{
e、 parentNode.parentNode.removeChild（e.parentNode）；
}
var appendPlaceHolder=函数（字段）{
var e=document.getElementById（“t”）；
e、 innerHTML+=（'{'+字段+'}x'）
}

注意：在跨度末端添加的只会创建一个空间

现场示例

---

不清楚您想做什么，div在snippetHi@Dij中是可编辑的，div按预期是可编辑的。但是，一旦我通过编程将span标记附加到div中，我在此之后键入的每个文本都会进入span标记。预期结果是，在添加span标记（通过单击按钮）后键入的文本将位于span标记的后面和外部