我有一个 DOM 结构，如下所示
<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>
在我的结构中，以编程方式，在网页生命周期中，很多div 被添加、删除并在"容器"内移动，但我需要一个最终的
在文本末尾的最后一个div(在这种情况下，
在div 'three' 上(随时。可以通过 css 实现此结果，例如在"容器"的最后一个子级上使用"内容"？
这将是最好的解决方案，因为我不必在最后一个div 中插入 br 并随时控制最后一个div 是什么，将其删除并在更改时重新添加到其中。无论如何，我对其他解决方案持开放态度。
注意：我不能使用jquery。
编辑：这不是风格问题。确实，我需要 br 出现在 html 代码中来解决另一个更复杂的问题，所以它与样式和空间无关。
编辑：我没有提到真正的问题比这复杂得多......我正在做一个编辑器。在此编辑器中，文本位于div '容器' 内，这是一个内容可编辑的div，然后分为几个内部div，在用户写入时更改。由于 Firefox 中的问题，如果我在最后一个div 的末尾没有一个 br，插入符号(光标(的行为真的很奇怪，唯一的解决方案似乎是随时将 br 保持在那个位置。
编辑：更深入地了解问题...问题是已知的。Firefox 解决了这个问题，在文本周围放置了额外的div。我不希望添加额外的div，所以当按下返回时，我强制添加一个简单的 br(而不是像往常那样额外的div 容器(。这样做，第一次在最后一个div的末尾按回车键时，插入符号会正确移动(如果您继续书写，它会在新行的正确位置写入(，但显示在奇怪的位置，例如在最后一行和上一行之间的中间或上一行的开头。这只发生在最后一个div 的末尾。如果您在最后一个div 的末尾有一个 br，则插入符号可以正常工作。
它也显示在这里，但建议的解决方案对我不起作用 Firefox 设置了错误的插入符号位置内容可使用 ：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>尝试使用 css 选择器添加边距而不是空行。
#container > div:last-child {
margin-bottom:1em;
}
尝试以下操作，而不是"物理"<br>：
div:last-child::after {
content: '';
display: block;
}
换行符元素除了强制换行到下一行之外什么都不做，您可以对设置为display: block;的任何元素(甚至是伪元素(执行相同的操作
我希望这有所帮助。
如果您出于某种原因需要使用 JavaScript 插入<br>标签，这里有一种方法可以做到这一点：
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)
}
}
编辑：我将代码示例修改为检查#container内部单个<br>的函数。每当编辑器更改结构时，都可以调用checkBreaks();。