In this example, you will see how to create DIV tag programmatically using JavaScript. JavaScript DOM features are Document object, createElement method, style object, ClassName property, margin property, innerHTML property, setAttribute method, id property,document.body, appendChild method.
Here’s an example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Create Dynamic div using javascript</title>
<style type="text/css">
.classA
{
color: #999;
padding: 10px;
width: 250px;
height: 150px;
background-color: #fafafa;
font-size: 12px;
font-family: verdana;
border: solid 1px #666;
}
</style>
<script type="text/javascript" language="javascript">
function CallDiv() {
var divTag = document.createElement("div");
divTag.id = "divDyn";
divTag.className = "classA";
divTag.innerHTML = "Welcome to aspxtutorial.com ";
document.body.appendChild(divTag);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btClick" type="button" value="Click" onclick="CallDiv();" />
<br />
</div>
</form>
</body>
</html>
Output
Download
Dynamic-Div.zip (1.06 kb)
See live demo