javascript - 如何显示 :none to display:block elements not take up its original space in DOM?

Question

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

但是，我希望元素能够根据我实际单击的按钮正确地级联。例如，如果我点击第一个按钮 4 次，带有 ids "school_"+ n 的元素会依次出现，如果我点击第二个按钮带有 id "noSchool_"+ n 的 div 出现在第一个不在其准确写入位置的之后我的 DOM。

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

谢谢。

Answer 1

如果您将一个 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