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>



C#

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

3 comments:

  1. AnonymousFebruary 3, 2009 at 6:29 AM

    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

    ReplyDelete
  2. AnonymousDecember 28, 2011 at 7:42 AM

    thank. It helped me.

    ReplyDelete
  3. AbhiMarch 31, 2012 at 3:17 AM

    thnks.... very usefull

    ReplyDelete