Adding html at the end of the last child of a div (possibly by css)?

Question

I have a DOM structure like

<div id="container">
  <div id="one">Some fancy text</div>
  <div id="two">Some other text</div>
  <div id="three">and that's enough!</div>
</div>

In my structure, programmatically, during the webpage life, a lot of divs get added, removed and moved inside 'container' but i need a final < br > being at the end of the text the last div ('and that's enough!< br >' on div 'three', in this case) at any moment. It is possible to achieve this result by css, like using 'content' on last child of 'container'?

It would be the best solution for I would not have to insert the br in the last div and control any time what is the last div, remove it and re-add it to it if changes. I'm open to other solutions, anyway.

NB: I can't use jquery.

EDIT: It is not a style problem. Truly, I need the br to be there in the html code to solve another more complex problem, so it is not about style and spaces.

EDIT: I didn't mention the real problem for is way more complex than this... I'm making an editor. In this editor, text is inside the div 'container' which is a content editable div and then divided in several internal divs, changing while the user writes. Due to a problem in Firefox, if I don't have one br at the end of the last div, the caret (cursor) acts really weird, and the only solution seems to be keeping a br in that position at any moment.

EDIT: going deeper in the problem... The problem is known. Firefox solves this putting extra divs in html around the text. I don't want extra divs to be added so when a return is pressed, I force the behaviour of adding a simple br (instead of an extra div container, as normally it would be). Doing this, the first time you press a return at the end of the last div, the caret moves correctly (if you keep writing, it writes in the correct position on a new line), but displays in a strange position, like in the middle between the last and the previous line or at the beginning of the previous line. This happens only at the end of the last div. If you have a br at the end of the last div the caret acts normally.

It is shown here too, but proposed solution are not working for me Firefox sets wrong caret position contentEditable with :before

window.addEventListener('keydown', function (event) {
  
  if(event.keyCode === 13){
    event.preventDefault(); // Ensure it is only this code that runs
    console.log("+++ Pressed return and adding a br!");
    addHtmlElementAtCursor('br');
    
    return false;
  }
});

function keyPress(event) {
  
}

function addHtmlElementAtCursor(element) {
  var sel, range, textNode;
  if (window.getSelection) {
      sel = window.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
          range = sel.getRangeAt(0);
          range.deleteContents();
          if (element==' ') {
            textNode = document.createTextNode('\u00A0');
          }else{
            textNode = document.createElement(element);
          }
          range.insertNode(textNode);

          // Move caret to the end of the newly inserted text node
          range.setStartAfter(textNode, textNode.length);
          range.setEndAfter(textNode, textNode.length);

          sel.removeAllRanges();
          sel.addRange(range);
      }
  } else if (document.selection && document.selection.createRange) {
      range = document.selection.createRange();
      range.pasteHTML(text);
  }
}

<div contenteditable=true>
<div id="one">some text</div>
<div id="two">some other text</div>
<div id="three">some other other text, try to give a return after the laste e of 'here' -> HERE</div>
</div>

Answer 1

Try using the css selector to add a margin instead of a blank line.

#container > div:last-child {
  margin-bottom:1em;
}

Answer 2

If you for some reason need to use JavaScript to insert the <br> tag, here's a way to do it:

function checkBreaks() {

  const container = document.querySelector('#container');
  const existingBreak = document.querySelector('#container br');
  const newBreak = document.createElement("br");

  if (existingBreak) {

    console.log('There\'s already a break in here, let\'s remove it');
    existingBreak.remove();

    console.log('Also let\'s insert a new break at the end');
    container.appendChild(newBreak);

  } else {

    console.log('No breaks, let\'s insert a new one at the end');
    container.appendChild(newBreak)

  }

}

Edit: I modified the code example as a function that checks for a single <br> inside #container. Whenever your editor changes the structure, you can call checkBreaks();.

Answer 3

Instead of a 'physical' <br> try the following:

div:last-child::after {
  content: '';
  display: block;
}

The Line Break element is doing nothing else than forcing a break to the next line and you can do the same thing with any element (even pseudo) that is set to display: block;

I hope this helps.