How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

Question

How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

Check out my current HTML code structure:

<div class="container>
    <div class="parent1"></div>
    <div class="parent2">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</div>

I'm aiming for the following HTML structure:

<div class="container>
    <div class="parent2">
         <div class="child1"></div>
              <div class="parent1"></div>
         <div class="child2"></div>
    </div>
</div>

Do you know if it's achievable using solely CSS or JavaScript (without jQuery)? Even if the HTML elements don't physically move, as long as they are displayed in that specific order on the webpage, I would be satisfied.

javascript css flexbox

Answer 1

Answer №1

You have the ability to achieve this using Javascript:

document.querySelector('.child1').appendChild(document.querySelector('.parent1'));

Presentation:

function rearrange() {
  document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}

.container * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
.parent1 {
  color: red;
  border-color: red;
}
.child1 {
  color: blue;
  border-color: blue;
}

<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
    I'm parent 2!
         <div class="child1 ">I'm child 1!</div>
         <div class="child2 ">I'm child 2!</div>
    </div>
</div>
<button onclick='rearrange();'>Rearrange!</button>

Note: Css is purely for aesthetic purposes

Answer 2

You have the ability to achieve this using Javascript:

document.querySelector('.child1').appendChild(document.querySelector('.parent1'));

Presentation:

function rearrange() {
  document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}

.container * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
.parent1 {
  color: red;
  border-color: red;
}
.child1 {
  color: blue;
  border-color: blue;
}

<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
    I'm parent 2!
         <div class="child1 ">I'm child 1!</div>
         <div class="child2 ">I'm child 2!</div>
    </div>
</div>
<button onclick='rearrange();'>Rearrange!</button>

Note: Css is purely for aesthetic purposes

Answer 3

Answer №2

Utilizing Javascript:

//Eliminate the first parent div from the container
 document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);

//Add a new div element between children
const parent2 = document.getElementsByClassName('parent2')[0];
let newDiv = document.createElement('div');
newDiv.className = 'parent1';
parent2.insertBefore(newDiv, parent2.querySelector('.child2'));

Answer 4

Utilizing Javascript:

//Eliminate the first parent div from the container
 document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);

//Add a new div element between children
const parent2 = document.getElementsByClassName('parent2')[0];
let newDiv = document.createElement('div');
newDiv.className = 'parent1';
parent2.insertBefore(newDiv, parent2.querySelector('.child2'));

Answer 5

Answer №3

If you want to successfully implement this solution, my recommendation would be to eliminate the div.parent2 that surrounds the child classes. Therefore, your revised code should look like this:

<div class="container parent">
 <div clas="parent1"></div>
 <div class="child1"></div>
 <div class="child2></div>
</div>

After making this adjustment, you can utilize flexbox for achieving the desired layout.

.parent{display: flex};
.child1{order:1}
.parent1{order:2}

Answer 6

If you want to successfully implement this solution, my recommendation would be to eliminate the div.parent2 that surrounds the child classes. Therefore, your revised code should look like this:

<div class="container parent">
 <div clas="parent1"></div>
 <div class="child1"></div>
 <div class="child2></div>
</div>

After making this adjustment, you can utilize flexbox for achieving the desired layout.

.parent{display: flex};
.child1{order:1}
.parent1{order:2}

How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing the spread operator to map an array within another array

Create a Vue3 Component without attaching it to the DOM

Navigate to the initial visible element on the specified webpage via the page hash link

WebRTC error encountered: Unable to add ICE candidate to 'RTCPeerConnection'

Jquery not functioning properly for show and hide feature

What steps should I take to ensure that this accordion is responsive?

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

What's wrong with the current longitude and latitude bounding box algorithm used for geolocation searches?

Using JavaScript, divide a string containing elements of unknown length that may be adjacent based on their type

Extracting Parameters using JQuery's load Method

The call stack limit has been exceeded due to the combination of Node, Express, Angular, and Angular-route

Adjusting the width of a nested Angular custom directive within an *ngIf statement to an absolute value

What is the best way to troubleshoot a $http asynchronous request?

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Are you in need of a BISON middleware solution for socket.io encoding and decoding?

JavaScript: Retrieve the Number of Subscribers on the BroadcastChannel

aligning buttons vertically within a dual-column design

Display live data directly from a specific XML tag on a webpage

The for loop does not cycle through every element

Inability to assign a value to an @input within an Angular project