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
Bookmark this link on del.icio.us (saved by 0 users)
Did you like this post?
|
|
||
|
|
|
|
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
comments
1 Response to "Dynamically Create a DIV tag using Server-Side code or JavaScript"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
Post a Comment