How to change position of div element using javascript

Question

Firstly, I don't know if this title is correctly and tell what I really want. I have html form with many elements ex. div, p or js. For example:

<div id="main">
  <div id="abc1"></div>
  <div id="abc2"></div>
  <style>.module a {min-height: 25px;padding-left: 95px;}</style>
  <form id="myForm">...</form>
  <script>...</script>
</div>

I want to change order or two elements: abc1 and abc2. In js I have:

$(document).ready(function(){
    $('#main').each(function (index, element) {
        var html = '';
        html += '<div id="abc2">'+ $(element).find('#abc2').html() +'</div>';
        html += '<div id="abc1">'+ $(element).find('#abc1').html() +'</div>';
        $(element).html(html);
    }); 
});

This works. But the problem is that I need to include each element from div#main. It is possible to include other without write each of one in javascript ?

Kind regards

@LucaDeNardi i think the solution to this problem is a bit simpler than that — GottZ, Nov 07 '17 at 14:42
I asked because I need to allow user to change his view and this is why I have this question. — PSoft, Nov 07 '17 at 14:44
There is a problem with `$('#main').each(…)`. You are querying an id, which should be unique in the document. Therefore, there will always be only one iteration of the `each` 'loop'. Use classes instead! — Barthy, Nov 07 '17 at 14:45
have you considered setting the display: flex and then setting the order as css properties? (build a flex layout and you wont have to change the dom) — Aleksei Maide, Nov 07 '17 at 14:46
The node tree in javascript is a linked list, once you learn to use the tree you will quickly find it simple to navigate and add and remove content as well as move nodes around. All nodes can have children. — SPlatten, Nov 07 '17 at 14:47
Can someone present a more understandable example for swap DOM child nodes in JavaScript? Or I asked to much please ? — PSoft, Nov 07 '17 at 14:55

score 0 · Answer 1 · answered Nov 07 '17 at 14:44

To me it looks a little costly operation, each time you search for an element and search it takes your frontend bandwidth. I wonder if you have tried fixing it with css and flex boxes? If you are using Bootstrap, there also you have classes which can work in your case.

How to change position of div element using javascript

1 Answers1