Rearrange the order HTML elements appear in with JavaScript or jQuery

Question

I'm building a modular building program and have a side panel where the user can add the code of a module in order to make it appear in the list.

The list is simply span tags with text in. Since they are already in a set order in the HTML, they appear in that default order when they are made visible, rather than appearing at the bottom of the list each time a new one is made visible.

My workaround is to make all of the spans positioned absolute and use some jQuery/JS to do some calculations and move the latest visible-made span to the bottom.

This code works in moving the input field and button to the bottom of the list:

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); });

Is there a better solution out there for re-arranging HTML elements without essentially faking it with absolute positioning?

check this stackoverflow.com/questions/10088496/jquery-reorder-divs — Deep
– Deep, Commented Dec 3, 2016 at 7:03
So do you want to add new elements to the bottom of the list? — rahul
– rahul, Commented Dec 3, 2016 at 7:06

Flyer53 · Accepted Answer · 2016-12-03 10:33:18Z

If I get you right it's actually quite easy. Make use of jQuery.append(). If you use jQuery.append() to append an item to the same container it's already contained in, the item is actually removed from its current location and appended at the end. As far as I read your question that's what you want. The example below shows the basic idea ...

$('#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>

Thankyou, I'd not came accross append before, pretty new to JS in general. This helped a lot though, thanks!

Collectives™ on Stack Overflow

Rearrange the order HTML elements appear in with JavaScript or jQuery

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related