title: Content Editable Div, appending HTML causing issue. Every text typed after programatically appending HTML gets added to the last HTML tag
body: <p><a href="https://i.stack.imgur.com/bKIVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bKIVm.png" alt="enter image description here"></a>I am trying to make a content editable div that can be used to generate message templates for an app. Users can append placeholders for fields like names to a template by hitting a button. The placeholders can be removed by hitting an 'x' on them as well. Here's the working snippet.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var removePlaceholder = function(e){
    e.parentNode.parentNode.removeChild(e.parentNode);
  }
  
  var appendPlaceHolder = function(field){
    var e = document.getElementById("t");
    e.innerHTML += ('&lt;span class="tag"&gt;{'+field+'}&lt;span onclick=removePlaceholder(this) class="remove"&gt;x&lt;/span&gt;&lt;/span&gt;')
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tag {
    background-color : blue;
    color : white;
  }
  .remove {
    color : red
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="t" contenteditable="true"&gt;Hello&lt;/div&gt;
  
  &lt;button onclick=appendPlaceHolder("first_name")&gt;Add first name&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The contenteditable part works just fine. But after I've added a placeholder using my appendPlaceHolder function, everything I type seem to get appended to the last inserted HTML element. </p>
  
  <p>How can I prevent this. I have closed the tag properly. Is there any way to change this behaviour.</p>
  
  <p>To recreate issue, run the snippet and hit the "Add First Name" Button, then continue typing in the area.</p>
  
  <p>Update</p>
  
  <p>Have added image to explain the situation</p>