Blog

Creating DOM using jQuery

By Gohil Jayendrasinh Blogs | JQuery Jun 20, 2012
In this blog I am going to explain about how to Create DOM using jQuery.

Creating DOM is very useful for AJAX base application and using jQuery.create API you can create DOM element easily.

You can download jQuery.create from

http://code.google.com/p/wikicontribs/downloads/list

Setp 1: Add create.js in your project.

Step 2 : you r aspx page like

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryCreate.Default" %>

 

<!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 runat="server">

    <title>jQueryCreate Demo</title>

    <style>

        .div

        {

            /* background-color: Red;*/

        }

    </style>

    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="Scripts/create.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="divdemo">

    </div>

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

        var demo = $.create('div', { 'class': 'div' }, ['Name: Jayendrasinh Gohil (Lion)']);

        $('#divdemo').append(demo);      

        var a = $.create('a', {

            'href': '#'

         

        });

        var demo = $.create('div',

          {

              'class': 'div'

 

          }, ['Email: swami_2003india@yahoo.com']);

        a.appendChild(demo);

 

        $('#divdemo').append(a);

 

    </script>

    </form>

</body>

</html>


1.png 

Step 3: your output like

Clipboard01.jpg

COMMENT USING