如何使显示:无显示:块元素不占用其在DOM中的原始空间

How do I make display:none to display:block elements not take up its original space in DOM?

本文关键字：显示 DOM 原始 空间 何使 元素      更新时间：2023-09-26

我有这个示例片段： https://jsfiddle.net/uyg8tauo/其中几个div最初定义为display: none;，并且在单击按钮时，我希望通过将元素的 display 属性更改为 block 来显示它们。

但是，我希望元素根据我实际单击的按钮正确级联。例如，如果我单击第一个按钮 4 次，带有 id s 的元素"school_" + n一个接一个地显示，如果我单击第二个按钮，带有 id "noSchool_" + n 的div出现在第一个按钮之后，而不是在我的 DOM 上确切地写它的位置。

请注意，它必须由旧版浏览器 (IE8<( 支持。显然，我的div必须预定义，无法动态添加。我真的希望我清楚地说明了我的问题，任何可行的解决方案都非常感谢！

谢谢。

如果将

DOM 元素重新附加到其同一容器中，它将放在 DOM 树中的最后。请考虑以下事项：

<div id="container">
  <div id="button-1">1</div>
  <div id="button-2">2</div>
  <div id="button-3">3</div>
</div>

现在，如果你这样做： document.getElementById('container').appendChild(document.getElementById('button-1'));

这将有效地将 DOM 切换为以下结构：

<div id="container">
  <div id="button-2">2</div>
  <div id="button-3">3</div>
  <div id="button-1">1</div>
</div>

如第一段所述：https://developer.mozilla.org/en/docs/Web/API/Node/appendChild

相关文章：