I don't want to change HTML because I want to leave the display the way it is for default view and want to move them in second view. I want to know how I can dynamically order the class of a div.
I want to do this via button click. I have
adEventListener() for 'click' where I am doing something and the move logic would go inside this event listener.
I understand that I can get these divs, remove from their parents and place it where I want. But I do not know how to do these for each of them since I have multiple lis. I am struggling with the loop so that I can do these for each li. I need to do this using pure JS and not jQuery.
<ul> <li> <div> <div class="a"> <div class="b"> <a class="c"> <div class="d"></div> <div class="e"> <div class="f"></div> // this is the first item that I want to move </div> <div class="g"></div> // this is the second item that I want to move </a> </div> <div class= "h"></div> // I want above mentioned divs to be before this div </div> </div> </li> //There are multiples lis <li></li>