My
tag collapses to a single line when I run my code, why?

Question

My div tag collapses to a single when I run my code. why? Aren't div tags suppose to occupy the entire line? why are all the elemnts in the div tag appearing in the same line? whats the issue? I tried using other tags and multiple div tags still the same issue



    
    
    
    Shapes











 

```

[This is my output][1]
 [1]: https://i.stack.imgur.com/1xLRT.png

user_3448527 · Answer

Your issue is that you are appending all inputs to the same div input1

const input1 = document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);

const input2 = document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input2").appendChild(input2);

const input3 = document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input3").appendChild(input3);

const input4 = document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input4").appendChild(input4);

div {
  /* demo */
  border: 1px solid red;
  margin-bottom: 10px;
  padding: 5px;
}

You can improve this code by using a for loop

for (i = 1; i < 5; i++) {
  const input = document.createElement("input");
  input.setAttribute("type", "text");
  document.getElementById(`input${i}`).appendChild(input);
}

div {
  /* demo */
  border: 1px solid red;
  margin-bottom: 10px;
  padding: 5px;
}

user_15651514 · Answer

The problem is that you're adding all your elements to the same

element.

Try something like that:

var input1 = document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);

var input2 = document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input2").appendChild(input2);

var input3 = document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input3").appendChild(input3);

var input4 = document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input4").appendChild(input4);

body {
  background-color: #3A3B44
}

div {
  color: antiquewhite;
  text-align: center;
  overflow: auto
}




  
  
  
  Shapes

user_13942159 · Answer

you need to just add div in container using bootstrap class and use the grid system like


  
    
     <--input Field -->
    
    
          <--input Field -->

    
    
         <--input Field -->

My <div> tag collapses to a single line when I run my code, why?

3 Answers