Reorder Html Elements In Dom

Question

I have a list of elements:

Solution 1:

If you want a pure Javascript solution (no jQuery involved)

var arr = [2,1,0];
var wrapper = document.getElementsByClassName("wrapper");
var items = wrapper[0].children;
var elements = document.createDocumentFragment();

arr.forEach(function(idx) {
    elements.appendChild(items[idx].cloneNode(true));
});

wrapper[0].innerHTML = null;
wrapper[0].appendChild(elements);

A little improvement of my previous answer. Fiddle: https://jsfiddle.net/jltorresm/1ukhzbg2/2/

Solution 2:

I know this is an old question, but google lead me to it. There is a sub property on flexbox (css) called 'order', that allow you to choose the order that elements are displayed. Is possible to use javascript to change this sub property and reorder the displayed elements.

https://www.w3schools.com/cssref/css3_pr_order.asp

Edit 1 - code example:

<style>.wrapper {
   display: flex;
   flex-flow: column;
 }
</style><divclass="wrapper"><divclass="abc">One</div><divclass="abc">Tow</div><divclass="abc">Three</div></div><buttonid="reorder"type="button">Reorder</button><buttonid="unreorder"type="button">Unreorder</button><script>var reorderButton = document.querySelector('#reorder');
var unreorderButton = document.querySelector('#unreorder');
var abcDivs = document.querySelectorAll('.abc');
var newOrder = [2, 1, 0];

reorderButton.addEventListener('click', function() {
  abcDivs.forEach(function(element, index) {
    element.style.order = newOrder[index];
  });
});
unreorderButton.addEventListener('click', function() {
  abcDivs.forEach(function(element, index) {
    element.style.order = null;
  });
});
</script>

Solution 3:

Keep in mind that when you add an element that is already in the DOM, this element will be moved, not copied.

CodePen

Baca Juga

let wrapper=document.querySelector(".wrapper");
let children=wrapper.children;
let newOrder=[3,2,1,0];
//it means that the first element you want it to be the four element//The second element you want it to be the third//the third element you want it to be the second//the four element you want it to be the firstfor(let i=0;i<newOrder.length;i++){
  for(let j=0;j<newOrder.length;j++){
    if(i==newOrder[j]){
      wrapper.appendChild(children[j]);
      break;
    }
  }
}

<divclass="wrapper"><div>a</div><div>b</div><div>c</div><div>d</div></div>

Solution 4:

no need to copy all items .. twice

var wrapper = $('.wrapper'), 
    items = wrapper.children('.abc'),
    arr = [2,1,0];

//items.detach(); if arr doesn't reuse all items
wrapper.append( $.map(arr, function(v){ return items[v] }) );

Solution 5:

This solution works better for me, we build an array of elements ([...wrapper.children]) then we use .sort based on a model ([5,4,3,2,1,0]) and then we use appendChild. Since the elements are the same as the originals, the event listeners remain working fine. Here the code:

//this is just to add event listeners
[...document.getElementsByClassName("abc")].forEach(e =>
  e.addEventListener("click", ev =>console.log(ev.target.innerText))
);

var wrapper = document.getElementsByClassName("wrapper")[0];
var items = [...wrapper.children];

const newOrder = [5,4,3,2,1,0]

items.sort((a, b)=>newOrder.indexOf(items.indexOf(a)) - newOrder.indexOf(items.indexOf(b)));

items.forEach(it=>wrapper.appendChild(it));

<divclass="wrapper"><divclass="abc">0</div><divclass="abc">1</div><divclass="abc">2</div><divclass="abc">3</div><divclass="abc">4</div><divclass="abc">5</div></div>

As you can see, if you click on 0, 1, etc, the event listener works.

JavaScript Sample