Crear elementos HTML

[Emmanuel0307]

Hola compañeros, me surgió un dilema.
Y es que se podria crear multiples elementos HTML (etiquetas) con javascript usando algun ciclo?

Por ejemplo.
Si requiero tener 10 inputs de tipo texto, seria algo tedioso estar escribiendo esas etiquetas directamente en el index.html.
Y fue cuando me preguntaba si se podria usar un bucle while o do while para poder crear esas 10 etiquetas directamente en javascript en lugar de estarlas creando de manera manuel en el index.

[carlos-gmx3]

Si... aunque el tema es que los IDs debes ser diferentes para poder recuperar los datos y mandarlos a tu back
Puedes numerar los IDs pero las etiquetas son otra cosa, aun así deberás editar cada input
Se me ocurren 2 opciones
la primera es, en VS Code escribes "input*10", esto te va a generar 10 inputs en automático
puedes editar el código con múltiples cursores
selecciona algo de texto en tu código y presiona Ctrl + D para generar un cursor en cada coincidencia
la segunda es usar Vue o React y crear un elemento input al q le puedas mandar el ID y otros textos como parámetros y que los genere el elemento completo ya con sus estilos y todo se simplifica a...
<entrada/, id345, formularioContacto>
<entrada/, id346, formularioContacto>

[LuisEsquivel27]

si se puede realizar, me parece que hay una función que se llama append() , un ejemplo aquí de como implementarlo https://developer.mozilla.org/en-US/docs/Web/API/Element/append
otra forma sería con innerHtml, por ejemplo tengo la siguiente función para mostrar los movimientos en la pokedex

el forEach es para recorrer el array de los movimientos, es similar al for, sólo que ya no le indicas el índice y hasta dónde finaliza, en la variable itemList tengo el html que quiero agregar en cada recorrido que haga del array en este caso es agregar un elemento

en una lista

, en este caso listMovs el id de mi etiqueta
• 
  
  y en la línea document.getElementById("listMovs").innerHTML += itemList;, solo agrega ese nuevo elemento a mi lista, es importante que tenga el "+=" ,de solo tener el "=" me va a mostrar sólo el último valor de mi arreglo, espero me haya explicado bien o si es a lo que te referías en tu pregunta

[Emmanuel0307]

Muchisimas gracias. Justo eso es lo que buscaba.

De hecho yo lo estuve haciendo con un for in, y cuando imprimia en consola me mostraba todos los movimientos, pero con el appendChild solo me agregaba una etiqueta, y era justo por lo que mencionabas del "+=", yo solo lo dejaba con "=" y solo me traia el ultimo dato.

Me ayudo muchisimo estoy, te lo agradezco.

[MarcosSilvaG]

pudiste solucionar lo de que cada que buscas un nuevo pokemon en vez de borrar tu lista existente solo añade los nuevos elementos y va haciendo mas grande dicha lista?

[Emmanuel0307]

si, tambien me pasaba el mismo error.
Asi que la forma en la que lo pude solucionar es la siguiente:

como lo comente, yo uso un for in, y en una variable almaceno toda la informacion, para que solo en el innerHTML no tenga que concatenarle nada.
Porque me di cuenta que cuando se conquetena la informacion en el innerHTML, es cuando pasa ese detalle que tu mencionas.