如何使顯示：無顯示：塊元素不佔用其在DOM中的原始空間？

我有這個樣本片段：https://jsfiddle.net/uyg8tauo/其中幾個div s最初定義爲display: none;並且在單擊按鈕時，我希望它們通過將元素的display屬性更改爲block而出現。如何使顯示：無顯示：塊元素不佔用其在DOM中的原始空間？

但是，我希望元素能夠基於我實際點擊的按鈕正確級聯。舉例來說，如果我點擊第一個按鈕的4倍，這些元素與id小號"school_" + n出現了一個又一個，如果我點擊第二個按鈕的div與id"noSchool_" + n出現後首當其衝不要放在正是寫在我的DOM上。

請注意，它必須由傳統瀏覽器（IE8 <）支持。顯然，我的div必須預先定義，不能動態添加。我真的很希望自己清楚自己的問題，並非常感謝任何可行的解決方案！

謝謝。

2016-02-15 Asker 2016

如果你不能修改DOM，我想你的第二個選項是我們的e flexbox佈局，您可以使用css指定訂單。 – jishi

你能詳細說明一下你的限制嗎？無法修改DOM？不能使用jQuery？ –

然後將其添加到您的問題中，準確地說明您需要支持哪些瀏覽器 –

如果您將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>

2016-02-15 12:56:33 jishi

我試圖做到這一點，但與jQuery，所以我可以消除document.getElementById s。感謝你的付出！ –

設置顯示屏在添加後會被阻擋，這個技巧！再次感謝你。 –

回答