在 div 的最后一个子元素的末尾添加 html（可能通过 css）？

Question

我有一个像这样的 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 被添加、删除和移动到“容器”内，但我需要一个最终 <br> 在文本末尾的最后一个 div（'这就够了！< br >' 在 div 'three' 上，在这种情况下）随时。可以通过 css 实现这个结果，比如在“容器”的最后一个孩子上使用“内容”？这将是最好的解决方案，因为我不必在最后一个 div 中插入 br 并随时控制最后一个 div 是什么，删除它并在更改时重新添加它。无论如何，我对其他解决方案持开放态度。注意：我不能使用 jquery。编辑：这不是风格问题。确实，我需要在 html 代码中使用 br 来解决另一个更复杂的问题，所以它与样式和空间无关。编辑：我没有提到真正的问题是比这更复杂的方式......我正在制作一个编辑器。在这个编辑器中，文本位于 div 'container' 中，它是一个内容可编辑的 div，然后分成几个内部 div，随着用户的书写而变化。由于 Firefox 中的一个问题，如果我在最后一个 div 的末尾没有一个 br，插入符号（光标）的行为真的很奇怪，唯一的解决方案似乎是随时将 br 保持在那个位置。编辑：更深入的问题......问题是已知的。Firefox 解决了在 html 中围绕文本放置额外 div 的问题。我不希望添加额外的 div，因此当按下回车键时，我会强制添加一个简单的 br（而不是一个额外的 div 容器，通常是这样）。这样做，当您第一次在最后一个 div 的末尾按回车时，插入符号正确移动（如果您继续书写，它会在新行的正确位置写入），但显示在一个奇怪的位置，如最后一行和上一行之间或上一行开头的中间。这只发生在最后一个 div 的末尾。如果您在最后一个 div 的末尾有一个 br，则插入符号会正常工作。

Answer 1

如果您出于某种原因需要使用 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)

  }

}

编辑： 我将代码示例修改为检查单个 <br>内部#container. 每当您的编辑器更改结构时，您都可以调用checkBreaks();.

Answer 2

尝试使用 css 选择器添加边距而不是空行。

#container > div:last-child {

  margin-bottom:1em;

}

Answer 3

而不是“物理”<br>尝试以下内容：

div:last-child::after {

  content: '';

  display: block;

}

Line Break 元素除了强制中断到下一行之外什么都不做，您可以对设置为的任何元素（甚至是伪元素）执行相同的操作 display: block;

我希望这有帮助。