how to create html element dynamically in javascript

var itemManCnt=2;
function addMoreHomeImage()
{
if(itemManCnt==6)
{
alert(“You can upload only 5 files”);
return false;

}
var parentObj=document.getElementById(‘FileElementItem’);
var divClrBoth = document.createElement(“div”);
divClrBoth.setAttribute(“class”,”ClrBoth”);
divClrBoth.setAttribute(“id”,itemManCnt);

var divClrSelect = document.createElement(“div”);
divClrSelect.setAttribute(“class”,”Select”);

var file= document.createElement(“input”);
file.setAttribute(“type”,”file”);
file.setAttribute(“id”,”InsuranceHomeImage”+itemManCnt);
file.setAttribute(“name”,”InsuranceHomeImage”+itemManCnt);
divClrSelect.appendChild(file);

var divRemove= document.createElement(“div”);
divRemove.setAttribute(“class”,”AddNew”);

var divRemoveLink = document.createElement(“a”);
divRemoveLink.setAttribute(‘onclick’,’deleteHomeImage(‘+itemManCnt+’)’);itemManCnt++;
divRemoveLink.innerHTML=’Remove’;
divRemove.appendChild(divRemoveLink);

divClrBoth.appendChild(divClrSelect);
divClrBoth.appendChild(divRemove);

parentObj.appendChild(divClrBoth);
}
function deleteHomeImage(iEle)
{
var parentObj=document.getElementById(‘FileElementItem’);
var olddiv = document.getElementById(iEle);
–itemManCnt;
parentObj.removeChild(olddiv);
}

Implementation example

<div id=”FileElementItem” class=”FileElement”>
<div class=”ClrBoth”>
<div class=”Select”>
<input type=”file” name=”InsuranceHomeImage1″ id=”InsuranceHomeImage1″>
</div>
<div class=”AddNew”>
<a onclick=”addMoreHomeImage()”>Add New</a>
</div>
</div>
</div>

Leave your comment