Question

我有这个示例代码段：https://jsfiddle.net/uyg8tauo/其中几个div最初被定义为display: none;，点击按钮后，我希望通过更改{{1}来显示它们元素的属性为display。

但是，我希望这些元素能够根据我实际点击的按钮正确级联。例如，如果我单击第一个按钮4次，则block s id的元素会一个接一个显示，如果我点击第二个按钮"school_" + n {{1} }} div出现之后的第一个，而不是在我的DOM上完全写入的位置。

请注意，旧版浏览器（IE8＆lt;）必须支持它。显然，我的id必须预先定义，不能动态添加。我真的希望我能清楚地解决我的问题，并且非常感谢任何可行的解决方案！

感谢。

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>