Every word within a div

One thing you can do is use getSelection() to get the active text node, and from there edit its content (with getSelection().focusNode().textContent ).

For example, the following demo removes the word that was inserted, but it has a couple of problems: 1) leave the space blank (I think it's because of the type of event, but I've done tests with keyup and it fails , I have to see why it is); and 2) move the cursor to the beginning of the text node (it may not be a problem if the word is inserted at the beginning, but it is somewhat inconvenient if it is at the end).

I leave it in case it serves as your base while I try to improve it:

let written = '';
document.getElementById('parent').addEventListener('keypress', function(e) {

  // guardamos la palabra
  var palabra = written;
  written += String.fromCharCode(e.which);

  if (e.which === 32) {
  
    // seleccionamos el nodo activo
    var sel = window.getSelection();
    // eliminamos la palabra recien escrita
    sel.focusNode.textContent = sel.focusNode.textContent.replace(palabra, "");
    
    let newDivWord = document.createElement('div');

    newDivWord.appendChild(document.createTextNode(written));
    newDivWord.classList.add('root');
    newDivWord.id = document.getElementById('parent').childElementCount + 1;
    document.getElementById('parent').appendChild(newDivWord);
    console.log(document.getElementById('parent'));
    written = "";
  }
})

#parent>div {
  border-color: yellow;
  float: left;
}

.root {
  padding-right: 2px;
}

<div id="parent" contenteditable=true style="border: black 2px solid; height:200px">
  <div class="root" id="1">Qué</div>
  <div class="root" id="2">es</div>
  <div class="root" id="3">Lorem</div>
  <div class="root" id="4">Ipsum</div>
</div>

I just made a validation by executing your code, because I have a similar need to create an element that allows me to dynamically add families of keywords.
I noticed that if I try to edit an existing word, it is replaced and additionally the changes are added at the end. I guess it's not the desired behavior .

  

Initial text: What is Loren Ipsum
  edited as: Qu eda como Loren Ipsum
  The container shows: Quda as it is Loren Ipsum gives as
  And the cursor stays inside the first container,

With dev tools I inspected the elements and found that the Quda como chain remains on the first div and two new ones are added at the end < div class="root" > da < / div > and < div class="root" > as < / div > So your code needs to address the possibility that existing containers will be edited and eventually be edited between two of them.

As for your question, I think that between containers there can only be spaces and punctuation characters (separators) since your interest, I suppose, should be to catch the words. So that if any free text were to remain, it should be inserted in a container instead of being deleted.