javascript - 使用 JavaScript 或 jQuery 重新排列 HTML 元素的出现顺序

Question

我正在构建一个模块化构建程序，并有一个侧面板，用户可以在其中添加模块的代码以使其出现在列表中。

列表只是带有文本的跨度标签。由于它们在 HTML 中已经按照设定的顺序排列，因此当它们可见时，它们会按默认顺序出现，而不是每次新出现时都出现在列表的底部。一个可见。

我的解决方法是使所有的跨度绝对定位，并使用一些 jQuery/JS 进行一些计算，并将最新的可见制作的跨度移动到底部。

此代码用于将输入字段和按钮移动到列表底部:

var searchModule = 0;
$("#add_module_button").click(function(){
   searchModule = "#" + document.getElementById("add_module_input").value;
   $(searchModule).css('display', 'block');
   visibleModules = $('.side_module:visible').length * 50 + "px";
   $('#add_a_module').css('top', visibleModules);
});

是否有更好的解决方案可以重新排列 HTML 元素，而无需使用绝对定位来伪造它？

Answer 1

如果我的理解正确的话，这实际上很容易。使用 jQuery.append()。如果您使用 jQuery.append() 将项目附加到已包含该项目的同一容器中，则该项目实际上会从其当前位置删除并附加到末尾。据我读到你的问题，这就是你想要的。下面的例子展示了基本思想......

$('#container').append($('#three').css('display', 'block'));
$('#container').append($('#one').css('display', 'block'));
$('#container').append($('#five').css('display', 'block'));

.item{
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="item" id="one">One</div>
  <div class="item" id="two">Two</div>
  <div class="item" id="three">Three</div>
  <div class="item" id="four">Four</div>
  <div class="item" id="five">Five</div>
</div>