Dynamically Create a DIV tag using Server-Side code or JavaScript

A user recently sent across a request where he needed to create HTML tags dynamically. Depending on the need, you may use server side code or plain JavaScript. This sample shows how to create a <DIV> tag dynamically using JavaScript or ASP.NET

Create a DIV Tag using JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Create DIV Dynamically Using JavaScript</title>

<script type="text/javascript" language="javascript">   

  function DynamicDiv() {       
        var dynDiv = document.createElement("div");
        dynDiv.id = "divDyna";
        dynDiv.innerHTML = "Created using JavaScript";
        dynDiv.style.height = "20px";
        dynDiv.style.width = "300px";     
        dynDiv.style.backgroundColor = 'gray';
        document.body.appendChild(dynDiv);
    }

</script>
</head>

<body>
    <div>
        <input id="Button1" type="button"
        value="Using JS" onclick="DynamicDiv();" />    

    </div>
</body>

</html>

Create a DIV Tag using ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"
Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head1" runat="server">
<title>Create DIV Dynamically Using ASP.NET</title>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnCode" runat="server"
        onclick="btnCode_Click"
        Text="Code Behind" />
    </div>
    </form>
</body>

</html>

protected void btnCode_Click(object sender, EventArgs e)
{
    System.Web.UI.HtmlControls.HtmlGenericControl dynDiv =
        new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
    dynDiv.ID = "dynDivCode";
    dynDiv.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Gray");
    dynDiv.Style.Add(HtmlTextWriterStyle.Height, "20px");
    dynDiv.Style.Add(HtmlTextWriterStyle.Width, "300px");
    dynDiv.InnerHtml = "I was created using Code Behind";
    this.Controls.Add(dynDiv);
}

VB.NET

Protected Sub btnCode_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim dynDiv As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
    dynDiv.ID = "dynDivCode"
    dynDiv.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Gray")
    dynDiv.Style.Add(HtmlTextWriterStyle.Height, "20px")
    dynDiv.Style.Add(HtmlTextWriterStyle.Width, "300px")
    dynDiv.InnerHtml = "I was created using Code Behind"
    Me.Controls.Add(dynDiv)
End Sub

Similarly you can also check

How to add CSS Programmatically to an ASP.NET Page

How to add Control dynamically in an ASP.NET AJAX application

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

3 comments:

Anonymous said...: Suprotim,
Could this be used to replace PopupcontrolExtender or DropdownExtender in ASP.NET AJAX. I am trying to use them in my application but I am not able to change the position attribute of the internal panel/div. I also tried creating a dropdownextender exactly as in ur article at http://dotnetcurry.com/ShowArticle.aspx?ID=167 but with my requirement of having a dropdownextender and popupcontrolextender inside a fixed height page is causing the popups to scroll away from the target controls.
I also posted a sample of the the code that exhibits that behavior in the comments section there.
Could you please help me out.

Thanks,
Sam; February 3, 2009 at 6:29 AM
Anonymous said...: thank. It helped me.; December 28, 2011 at 7:42 AM
Abhi said...: thnks.... very usefull; March 31, 2012 at 3:17 AM