add div element dynamically in same form

Question

I have a div element which should add itself when the image plus sign is clicked. Can someone please suggest the way to implement it? I am not experienced in web that much hence asking for suggestions/help.

    <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>&nbsp;</p>
      </div>
    </form>

Thanks a lot,
Sudip

Answer 1

You have to use the following DOM methods

to create an element: document.createElement

to add the created element to a parent element: parentElement.appendChild

Explanation:

When you click the button you have to add an event listener with an event of type click and attach a function to be called with it. After that when the event is executed the associated function will run and as a corresponding result the function will execute the code which is creating an element

MDN Docs links:

to create an event listener: EventTarget.addEventListener()

createElement: Document.createElement()

appendChild: Node.appendChild()

Here is a snippet that will solve your issue

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>&nbsp;</p>
      </div>
    </form>
    
    <section id="appendTo"></section>