javascript - 如何像按钮表单输入一样动态排列 html 元素

Question

我有一个关于如何动态排列 html 按钮的两部分问题。我想在不重新加载页面的情况下排列按钮，所以我一直在尝试使用jquery。

首先，我有一列 html 按钮，我希望能够单击一个按钮并将其转到该列中的特定位置。例如，如果我单击一个按钮并且希望它转到该列的最顶部，那么我单击另一个按钮，然后最近单击的按钮将转到该列的最顶部。

我想我可以用一组 html 按钮来完成这个任务，但我对 javascript 很陌生，我不知道是否可以以这种方式动态排列 html 按钮。是否可以使用 javascript 数组动态排列 html 按钮？有没有更好的方法来排列 html 元素？

其次，我想动态地将新按钮插入到列的顶部。我在使用 jquery 的 before 方法添加新按钮方面取得了一些成功。但 before 方法要求我在列顶部提供当前按钮，如果我动态排列和重新排列按钮，则此方法不起作用。

我已经研究了 jquery 的 API 文档中的其他“DOM 插入”方法，但我还没有找到一种方法可以在列顶部动态插入按钮，而无需专门提供最顶部按钮的 id。

我的数组概念在这里再次派上用场。我可以在数组的零索引中插入一个新按钮，但我在查看的代码中没有看到通过 javascript 数组显示 html 元素。

请帮忙。谢谢!

Answer 1

你看过prepend()/prependTo()吗？您只需要保存对按钮列的容器的引用，然后将其添加到其前面。

Link to Fiddle