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> </p>
</div>
</form>
Thanks a lot,
Sudip
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> </p>
</div>
</form>
<section id="appendTo"></section>