0
178
ViewsCómo agregar nuevas líneas después de los elementos HTML
Tengo un método simple para agregar cuadros de entrada después de hacer clic en un botón. El objetivo de este método es generar un conjunto de cuadros de entrada con una nueva línea insertada después de cada div.
En la captura de pantalla anterior, puede ver que los divs están espaciados correctamente. Sin embargo, cuando se hace clic en el botón add_more, las entradas generadas no aparecen correctamente.
Esperado: el código debería generar nuevos cuadros de entrada como este:
<div> Key Term 2: <input id="el2" type="text" value=""> <br> </div> <br>Actual:
function add_more() { // we've added more inputs. addMore = true; // set html generated to false, because new inputs have been added. htmlGenerated = false; // increment the number of inputs. numberOfInputs++; //fetch the input boxes. inputs = document.getElementById("inputBoxes"); // create newline br_key = document.createElement("br"); // create newline br_description = document.createElement("br"); //create a new row for a key term. row = document.createElement("div"); // set the key term text. row.innerHTML = "Key Term "; row.innerHTML += numberOfInputs; row.innerHTML += " :"; // create the input for the key. key = document.createElement("input"); key.setAttribute("id", "el" + numberOfInputs); //add the key to the row. row.appendChild(key); row.after(br_key); //create a row for the new description. row2 = document.createElement("div"); // set the description text. row2.innerHTML = "Description " row2.innerHTML += numberOfInputs; row2.innerHTML += " :"; // create the description input description = document.createElement("input"); description.setAttribute("id", "dl" + numberOfInputs); // add the description to the row. row2.appendChild(description); row2.after(br_description); // add the rows for the key and the description to the inputBoxes. inputs.appendChild(row); inputs.appendChild(row2); } <div>Key Term 5 :<input id="el5"></div>Cualquier ayuda para resolver este problema sería muy apreciada. Gracias.
2 answers
Answer question0
Su problema aquí es esencialmente HTML incorrecto, CSS. Implementaría sus entradas, etc. así:
.full-width-label { display:block; } <label class="full-width-label" for="1">Label</label> <input type="text" id="1"/>Hay varias formas de lograr lo anterior, esta es solo una de sus opciones, pero ahora ya no necesita incrustar la apariencia en el HTML y el formato de su HTML (saltos de línea) es independiente de su apariencia.
Es posible que desee buscar una solución lista para usar para este tipo de cosas, como Bootstrap o Tailwind
0
Puedes usar make it de una manera simple
HTML
agregue este jquery cdn
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <button type="button">Click Here</button> <div class="appendDiv"> </div>js
$(document).ready(function (){ var button = document.getElementsByTagName('button'); var appendDiv = document.getElementsByClassName('appendDiv'); var key = 1; var descKey = 1; $('button').click(function(event){ event.preventDefault(); $(appendDiv).append('<div class="child"><div class="grand-child"><label>Key Form :'+ ' '+(++key)+'</label><input type="text" value=""/></div><div class="grand-child"></div><label>Description :'+ ' '+(++descKey )+'</label><input type="text" value=""/></div>'); }) })