Solution 1 :

var button = document.getElementsByTagName("button")[0];

button.addEventListener('click', function(e) {
    var newdiv= document.createElement("div");
    newdiv.classList.add("outerbox");
    document.getElementsByClassName("wrapper")[0].appendChild(newdiv);
});
.wrapper {
  width: 100%;
  border: 1px solid blue;
  
}

.wrapper > div {
  display:inline-block;
}

.outerbox {
  width:120px;
  height:120px;
  border: 1px solid black;
}
<button>Append New Box</button>
</br>
</br>
</br>
<div class=wrapper>
  <div class=outerbox>
  </div>
</div>
</br>

CSS display should be all you need. Note that if the parent wrapper element is not wide enough to display your new child box horizontally, it will get displayed under the original one, or vertically. To ensure the new one is displayed on the same row, be sure the parent wrapper has enough width, which you can hard code in pixels. So, the short answer is one CSS rule as follows:

.wrapper > div {
  display: inline-block;
}

Solution 2 :

The solution was pretty trivial. You need to ad “px” to top, because it needs an unit in order to properly define top position.

Problem :

I have a document where is a wrapper. This wrapper has two boxes. Box1 has div1 in which has some position (I can get the top position). On a click of a button the function returns the position of a div1, so that I’d be able to create div2 on the same level (pixels from top of the document), however something goes wrong. How should I approach it in order to create this div2 on the same level as div1 with JS? I’ve tried to do

const div2 = documentElement("div");
div2.style.position = "absolute";
div2.style.top = div1Top;
getElementById("box2").appendChild(div2);

but it doesn’t work the way I want. Is there an issue with my whole project or just the code above should be written differently?

enter image description here

HTML:

<div id="wrapper" className='flex flex-row'>
   <div id="box1">
      <div id="div1">
      </div>
      <button type="button" onClick={create}>
         Create div2
      </button>
   </div>
   <div id="box2">
                    
   </div>
</div>

JS:

async function create() {
        const div2 = document.createElement("div");
        div2.style.position = "absolute";
        div2.style.top = top;
        document.getElementById("box2").appendChild(div2);
}

Thanks a lot in advance

Comments

Comment posted by Salketer

You need to show us enough code to reproduce the problem or else we can only guess… Check if the box2 has a position=relative style, this could mess up your positioning.

Comment posted by IVOBOT

These divs are really simple – do not have relative position.

Comment posted by IVOBOT

I think there might be something wrong with append, because it indeed appends the empty box2 – just sticks to the top of it.

Comment posted by Salketer

Please show us your code, don’t you think it is more likely that your code has a mistake than a native function that has been used in billions of instances for more than 10 years?

Comment posted by Mike

Where do you get the value of div1Top from? There are multiple possible values for top, each using a different reference point.

Comment posted by IVOBOT

Does not solve the problem unfortunately

Comment posted by Ronnie Royston

try it again with example

Comment posted by IVOBOT

As above, the unit or rather the lack of it was the issue. Thanks for help though

Comment posted by Ronnie Royston

CSS handles the layout, not JavaScript. Your question does not show us your CSS other than

Comment posted by Salketer

We would have been able to tell you that if your code included all parts necessary to debug 😉 Glad you found out.

By