Error404 Error404 - 7 months ago 20
Javascript Question

Getting different values with .width() function after .appendChild()

I have a

div
on my
HTML
file in which I create more
divs
inside of it via
Javascript
.

Here is the
Javascript
&
JQuery
code that I use to create the divs inside their parent div:

$(document).ready( function() {
var parentDiv = document.getElementById('container');

for(var i = 0; i < 20; i++){
var div = document.createElement("div");
div.setAttribute("id", "div" + i);
div.innerHTML = i;
div.classList.add("square");
parentDiv.appendChild(div);
var widthDiv = $('#div' + i).width();
console.log(widthDiv); //It returns 499 for the first element
}
}


The container div is a
flex
container and their childs are also
flex
. If I check on the console of
Google Chrome
when the page is loaded, for example,
$('#div0').width()
, I get the value of
100
which is the correct value.

Why am I getting different values if I am trying to retrieve the value of
width
of the element that I have just append to its parent? How can I fix it?

P.S: I think it is something related that the elements are not append before I try to read their property but then I do not understand why they return me a different value intead of null or 0.

EDIT: As the comments below asked, I tried to simplify my code as much as possible:

HTML code:

<div id="container"></div>


CSS code:

html,body{
height: 100%;
}
body{
margin: 0;
}
#container{
display: flex;
position: relative;
flex-flow: row wrap;
width: 100%;
background-color:blue;
}
.square{
flex: 1 0 20%;
height: 30px;
background-color: red;
}


Thanks in advance!

Answer

Why this code is displaying different values for the widths?

In fact here you are using display:flex with your divs, and they don't have a fixed width so for each one the width will be the box width + the remaining width in the container, that's why you always get the values :

598
299
199
149
120

For each elements in a row, you can see it in the console.

$(document).ready(function() {
  var parentDiv = document.getElementById('container');

  for (var i = 0; i < 20; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "div" + i);
    div.innerHTML = i;
    div.classList.add("square");
    parentDiv.appendChild(div);
    var widthDiv = $('#div' + i).width();
    console.log(widthDiv); //It returns 499 for the first element
  }
});
html,
body {
  height: 100%;
}
body {
  margin: 0;
}
#container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  width: 100%;
  background-color: blue;
}
.square {
  flex: 1 0 20%;
  height: 30px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>

Explanation:

And you are appending the div in your loop so each itaeration, the available width will be decreasing and each created element will fill this width, so that explains the different values you got.


Reference:

If you take a look at the MDN CSS flex specification you can see that:

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space.