asked on

How to add dynamic element to DIV using Jquery or Ajax

HI,
I am having requirement to add textbox radio button and input button dynamically in page. Text box is to add email radio to select primary email and button to delete email row. By clicking on Add new button a new row should be added.
All this I have to do without submitting form. So have to use jquery or Ajax.
Please help.

Gurvinder Pal Singh

You can call the following function at button click

function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
ni.appendChild(newdiv);
}

or

function addTextBox()
{
var txtHolder = document.createElement('div');
var txtBox = document.createElement('input');
txtBox.id = "dynaTxtBox_"+txtCount;
txtBox.className = "dynaTxtBox";
txtBox.value = txtCount;// This line is not necessary
txtHolder.appendChild(txtBox);
document.getElementById('textBoxContainer').appendChild(txtHolder);
txtCount++;
}

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial