CODEWITHSUNDEEP
javascripthtmlcss
Joseph Oikelomen
Joseph Oikelomen

Reputation: 17

Is there a way to re-position DOM elements using JavaScript?

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; color: red"></div>
        <div class="blue" style="width: 300px; height: 300px; color: blue"></div>
    </div>

</body>
</html>
<style>
 .boxes{display:flex; flex-direction:row;}
</style>

is there a way using CSS or javascript to put div.blue in the position of div.red or div.red in the position of div.blue

Upvotes: 0

Views: 98

Answers (5)

YouBee
YouBee

Reputation: 2061

Try to change this the way you want to. 

document.querySelector(".red").addEventListener("mouseover",()=>{
document.querySelector(".red").style.background="blue"
document.querySelector(".blue").style.background="red"

})
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; background: red"></div>
        <div class="blue" style="width: 300px; height: 300px; background: blue"></div>
    </div>

</body>
</html>
<style>
 .boxes{display:flex; flex-direction:row;}
</style>

Upvotes: 0

webelf000
webelf000

Reputation: 147

Little ugly code.

    var redtag = document.getElementsByClassName("boxes")[0].getElementsByClassName("red")[0];
    redtag.remove();
    var bluetag = document.getElementsByClassName("boxes")[0].getElementsByClassName("blue")[0];
    bluetag.remove();
    document.getElementsByClassName("boxes")[0].appendChild(bluetag);
    document.getElementsByClassName("boxes")[0].appendChild(redtag);

Upvotes: 0

martinho
martinho

Reputation: 1016

No js needed to sort the elements.

See if this is what you're looking for

.boxes {
  display: flex;
}

.blue {
  order: 1;
}

.red {
  order: 2;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; background: red"></div>
        <div class="blue" style="width: 300px; height: 300px; background: blue"></div>
    </div>

</body>
</html>

Upvotes: 4

Sajeeb Ahamed
Sajeeb Ahamed

Reputation: 6390

You can do it by CSS flex property. Just set the boxes element's flex-direction to row-reverse.

.boxes {
  display: flex;
  flex-direction: row-reverse;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="boxes">
        <div class="red" style="width: 300px; height: 300px; background: red"></div>
        <div class="blue" style="width: 300px; height: 300px; background: blue"></div>
    </div>

</body>
</html>

Note

If you want to display the two boxes vertically aligned then use flex-direction: column-reverse; instead of row-reverse.

Upvotes: 1

Giancarlo Ventura
Giancarlo Ventura

Reputation: 857

Get the parent node ('.boxes'), then get the childs indexes and swap:

childNode[1].parentNode.insertBefore(childNode[1], childNode[0]);

Upvotes: 0

Related Questions