aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Monday, January 31, 2011 Total Views:  

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

Protected by Copyscape Online Plagiarism Tool

Comments (3) -

Master Bilt Undercounter Refrigerator
Master Bilt Undercounter Refrigerator United States
11/21/2013 11:31:11 PM #

Hi there, just turned into aware of your weblog via Google, and located that it is truly informative. I'm going to watch out for brussels. I'll appreciate when you proceed this in future. A lot of other folks can be benefited from your writing. Cheers!|

Habibi
Habibi United States
1/11/2014 10:11:20 AM #

I as well believe thence, perfectly pent post!.

Habibi
Habibi United States
1/11/2014 10:27:51 AM #

I don�t normally have a look at these kinds of internet sites (I�m a pretty shy person) - but even though I was a bit shocked as I was reading, I was definitely a bit excited as properly. Thanks for giving me a big smile for the day

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5