Home/ Questions/Q 6373311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:20:52+00:00

I have a webpage which has content layout like 1,2,3 in markup (and also

  • 0

I have a webpage which has content layout like 1,2,3 in markup (and also for no-js
) while visually I want it to be 2,3,1.

I’m using Javascript (jQuery) to swap their position. But the problem is, the Javascript code is executed after page loads and therefore the swap process can be obviously seen.

The only solution (and a bad one) I can think of now is to hide the whole body first and restore body when the swap is done.

$(function() {
    $("#div2, #div3").insertBefore("#div1");
    $("body").css({display: "block"});
});

<body style="display: none;">
...
<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
...
<!-- in case JS is disabled, use css to restore -->
<!-- style should not be here, that's why I said it's a bad one. -->
<style type="text/css">
body {display: block !important;}
</style>
</body>

Anyone got a better idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try executing JavaScript instantly after those three elements:

    <div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div> 
<script type="text/javascript"> $("#div2, #div3").insertBefore("#div1"); </script>

    Of course, it’s a pollution of your HTML, but, in any case, it’s better than hiding the whole body element (the page will flicker in some old browsers).

    • 0