如何使display：none to display：block元素不占用DOM中的原始空間？

Question

我有以下示例代碼片段： https : //jsfiddle.net/uyg8tauo/，其中最初將幾個div定義為display: none; 然后單擊按鈕，我希望通過將元素的display屬性更改為block來顯示它們。

但是，我希望元素根據我實際單擊的按鈕正確層疊。 例如，如果我單擊第一個按鈕4次，則id s "school_" + n的元素將"school_" + n顯示；如果單擊第二個按鈕，則id "noSchool_" + n的div出現在第一個"noSchool_" + n 之后而不是確切地寫在我的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