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



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

3 Responses to "Dynamically Create a DIV tag using Server-Side code or JavaScript"
  1. sam said...
    February 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

  2. Anonymous said...
    December 28, 2011 at 7:42 AM

    thank. It helped me.

  3. Abhi said...
    March 31, 2012 at 3:17 AM

    thnks.... very usefull

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions