Web and Mobile Apps Codeware: July 2014

Monday, July 28, 2014

Dynamically creating html controls like textbox, labels using JavaScript

HI in this post i will show how to create html controls dynamically using JavaScript:

Below is the sample code :

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function load() {

var t = document.createElement("table"),
tb = document.createElement("tbody"),
tr = document.createElement("tr"),
td = document.createElement("td");

t.style.width = "100%";
t.style.borderCollapse = 'collapse';

var itemLabel = document.createElement("Label");
itemLabel.innerHTML = "Enter Name";
itemLabel.htmlFor = "txtName";
td.appendChild(itemLabel);
tr.appendChild(td);
tb.appendChild(tr);
t.appendChild(tb);

document.getElementById("divContent").appendChild(t);

var t1 = document.createElement("table"),
tb1 = document.createElement("tbody"),
tr1 = document.createElement("tr"),
td1 = document.createElement("td");

t1.style.width = "100%";
t1.style.borderCollapse = 'collapse';

var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Name");
element.setAttribute("style", "width:200px");
element.setAttribute("id", "txtName");

td1.appendChild(element);
tr1.appendChild(td1);
tb1.appendChild(tr1);
t1.appendChild(tb1);

document.getElementById("divContent").appendChild(t1);

}
</script>
</head>
<body onload="load()">
<form id="form1" runat="server">
<div id="divContent"></div>
</form>
</body>
</html>

Output: