Blog

Creating DOM using jQuery

By Gohil Jayendrasinh Jun 20 2012
In this blog I am going to explain about how to Create DOM using jQuery.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 3k
  • 0

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