Tengo un elemento div que debería agregarse cuando se hace clic en el signo más de la imagen. ¿Puede alguien sugerir la forma de implementarlo? No tengo mucha experiencia en la web, por lo tanto, pido sugerencias/ayuda.
<form id="form1" name="form1" method="post"> <div id="1"><p> <input name="imageField" type="image" id="imageField" src="../../../Users/user/OneDrive/Pictures/plus sign.PNG" alt="plus sign" width="20" height="20" onClick="onclickAddDiv('1')"> <label for="select"> Select:</label> <select name="select" required="required" id="select"> <option value="CE">CE</option> <option value="PE">PE</option> </select> <label for="textfield">Strike</label> <input name="textfield" type="text" id="textfield" size="10"> Price <input name="textfield2" type="text" id="textfield2" size="8"> Qt <input name="textfield3" type="text" form="form1" size="8"> Type <select name="select2" id="select2"> <option value="Buy" selected="selected">Buy</option> <option value="Sell">Sell</option> </select> </p> <p> </p> </div> </form> Muchas gracias,
Sudip
Tienes que usar los siguientes métodos DOM
para crear un elemento: documento. crearElemento
para agregar el elemento creado a un elemento principal: parentElement. añadir Niño
Explicación:
Cuando hace clic en el botón, debe agregar un detector de eventos con un evento de tipo clic y adjuntar una función para llamarlo. Después de eso, cuando se ejecute el evento, se ejecutará la función asociada y, como resultado correspondiente, la función ejecutará el código que está creando un elemento.
Enlaces de documentos de MDN:
para crear un detector de eventos: EventTarget.addEventListener()
crearElemento: Documento.crearElemento()
appendChild: Nodo.appendChild()
Aquí hay un fragmento que resolverá su problema
const addElementBtn = document.querySelector("#addElement"); //Will be called when the button is created function handleInjection() { generateElement("div"); } //Create an element and append it to the form function generateElement(element) { //Create an element const createdElement = document.createElement(element); //select the parent const injectInto = document.querySelector("#appendTo"); //append the created element to the parent injectInto.appendChild(createdElement); } //Create an event listener addElementBtn.addEventListener("click", handleInjection); div { height: 1rem; width: 2rem; background-color: red; } #appendTo{ margin-left: 10rem; } <form id="form1" name="form1" method="post"> <div id="1"> <p> <button name="imageField" type="button" id="addElement">add element</button> <label for="select"> Select:</label> <select name="select" required="required" id="select"> <option value="CE">CE</option> <option value="PE">PE</option> </select> <label for="textfield">Strike</label> <input name="textfield" type="text" id="textfield" size="10"> Price <input name="textfield2" type="text" id="textfield2" size="8"> Qt <input name="textfield3" type="text" form="form1" size="8"> Type <select name="select2" id="select2"> <option value="Buy" selected="selected">Buy</option> <option value="Sell">Sell</option> </select> </p> <p> </p> </div> </form> <section id="appendTo"></section>