如何动态排列 html 元素，如按钮表单输入答案

【问题标题】：How to dynamically arrange html elements like a button form input如何动态排列 html 元素，如按钮表单输入
【发布时间】：2013-09-18 14:42:23
【问题描述】：

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

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

我想我可以使用一组 html 按钮来完成此操作，但我是 javascript 新手，我不知道是否可以以这种方式动态排列 html 按钮。是否可以使用 javascript 数组动态排列 html 按钮？有没有更好的方式来排列html元素？

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

我在 jquery 的 API 文档中查看了其他“DOM 插入”方法，但我还没有找到在不专门提供最顶部按钮 id 的情况下在列顶部动态插入按钮的方法。

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

请帮忙。谢谢！

【问题讨论】：

关于第一部分。你总是希望按钮到底部吗？我刚刚意识到，您放置它的方式可以表明它可以在许多地方使用。您将如何指示按钮的位置？

标签： javascript jquery html arrays button

【解决方案1】：

关于第一部分：

单击按钮时，将其附加到按钮容器中。

<div>
  <button>1</button>
  <button>2</button>
</div>

<script>
$(document).ready(function() {
$('button').click(function() {
    $(this).appendTo('div');
});
});
</script>

关于第 2 部分： 添加按钮时，您可以使用prepend。

$('button').click(function(){ $('div').prepend('<button>button</button>'); });

这是两个部分的小提琴

这是一个 jsbin：http://jsbin.com/ORoXIHo/1/edit

【讨论】：

append方法不会将新按钮添加到容器的末尾吗？假设新按钮具有不同的值，我正在尝试更改它在容器中的位置。如何将其从底部移动到顶部？
当您添加到顶部时，您可以使用prependTo 方法。我正在讨论单击按钮并将它们移动到底部的情况。我可以继续扩展我的答案。

【解决方案2】：

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

Link to Fiddle

【讨论】：

【解决方案3】：

是否可以使用 javascript 数组动态排列 html 按钮？有没有更好的方式来排列 html 元素？

javascript 中的元素列表被键入为 NodeLists。 DOM 包含所有节点和节点列表。因此，它们可以通过document 访问。在 jQuery 中，您可以定位这些节点。 jQuery 会将每个 Node 包装在一个对象中，如果存在多个 Node，它会创建一个包含这些 jQuery 对象的数组。

我可以在数组的零索引中插入一个新按钮，但在我查看的代码中，我没有看到通过 javascript 数组显示的 html 元素。

var newButton = $("<input type='button' class='btn' />");
var htmlElements = $(".btn");
newButton.insertBefore(htmlElements.first());

【讨论】：