Arrange a div element among the descendants of a neighboring div

Question

Arrange a div element among the descendants of a neighboring div

I am working with a div that is generated by a library. This div contains 2 child divs with varying heights, which can change based on the API response and the width of the browser window.

My goal is to display another div (my-div) between top-bar and bottom-bar.

<div class="my-div">
        My content with a fixed height 
      </div>

      <div class="library-output">
        <div class="top-bar">Content here with unknown height</div>
        <div class="bottom-bar">More content here with unknown height</div>
      </div>

I am unable to alter the library or its output using JavaScript (as it is a third-party React application). I do know the class names of all the divs beforehand.

Is it possible to achieve this layout using CSS alone? I am considering adding a margin-bottom to top-bar to create space, but I am having trouble with positioning my-div.

html css

Answer 1

Answer №1

If you want to add an element after another element using JavaScript, you can follow this approach:

someElement.parentNode.insertBefore(newElement, someElement.nextSibling);

Here, newElement is the element you want to add and someElement is the element after which you want to add it.

For your specific scenario, the code would be:

const myDiv = document.getElementsByClassName('my-div');
const topDiv = document.getElementsByClassName('top-bar');
topDiv.parentNode.insertBefore(myDiv, topDiv.nextSibling);

Answer 2

If you want to add an element after another element using JavaScript, you can follow this approach:

someElement.parentNode.insertBefore(newElement, someElement.nextSibling);

Here, newElement is the element you want to add and someElement is the element after which you want to add it.

For your specific scenario, the code would be:

const myDiv = document.getElementsByClassName('my-div');
const topDiv = document.getElementsByClassName('top-bar');
topDiv.parentNode.insertBefore(myDiv, topDiv.nextSibling);

Arrange a div element among the descendants of a neighboring div

Answer №1

Similar questions

MUI Typography - Text turns white when hovered over

Error message: JavaScript multiline strings within backticks are currently unsupported in Internet Explorer

Enhance Your Highcharts Funnel Presentation with Customized Labels

Steps to ensure your Bootstrap side menu spans the entire height of the page

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

What steps can be taken to ensure a function operates even when the mouse is stationary?

Pressing the 'Enter' key within a textarea in a JQuery

Dynamically resizing a property in the DOM with Angular

The input field does not accept any values even after setting it to be editable

Utilize background-size:cover and incorporate text in a horizontally scrolling webpage

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

modify the color of text in a row within a jquery ajax table

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

Keep HTML in sync across browser and server

Using Javascript code to draw particles at the cursor's position and then directing those particles towards the bottom of

JavaScript error message stating that the setAttribute function is null

Tips for creating a responsive ReactJS website with Material-UI

Identify the font style of the text box and ensure that the contenteditable feature matches the appearance of the

Tips for resizing a background image horizontally without changing its height

What could be the reason for the gap that shows up when transitioning from one image to the