Mi etiqueta div colapsa a una sola cuando ejecuto mi código. ¿por qué? ¿No se supone que las etiquetas div ocupan toda la línea? ¿Por qué todos los elementos de la etiqueta div aparecen en la misma línea? ¿Cual es el problema? Intenté usar otras etiquetas y varias etiquetas div siguen siendo el mismo problema
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shapes</title> <style> body{background-color: #3A3B44; text-align: center;} div{ color:antiquewhite; text-align: center; display:block; overflow: auto} </style> </head> <body> <div id="input1" ></div> <div id="input2" ></div> <div id="input3" ></div> <div id="input4" ></div> <script > 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("input1").appendChild(input2); var input3= document.createElement("input"); input3.setAttribute("type", "text"); document.getElementById("input1").appendChild(input3); var input4= document.createElement("input"); input4.setAttribute("type", "text"); document.getElementById("input1").appendChild(input4); </script> </body> </html>``` [This is my output][1] [1]: https://i.stack.imgur.com/1xLRT.pngSu problema es que está agregando todas las entradas a la misma 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; } <div id="input1"></div> <div id="input2"></div> <div id="input3"></div> <div id="input4"></div> Puedes mejorar este código usando un bucle for
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; } <div id="input1"></div> <div id="input2"></div> <div id="input3"></div> <div id="input4"></div>El problema es que está agregando todos sus elementos <input> al mismo elemento <div> .
Prueba algo así:
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 } <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shapes</title> </head> <body> <div id="input1"></div> <div id="input2"></div> <div id="input3"></div> <div id="input4"></div> </body> </html>solo necesita agregar div en el contenedor usando la clase bootstrap y usar el sistema de cuadrícula como
<div class="container"> <div class="row"> <div class="col"> <--input Field --> </div> <div class="col"> <--input Field --> </div> <div class="col"> <--input Field --> </div> </div> </div>