Blog

Creating DOM using jQuery

Posted 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

post comment
     

good one.need project source also.

Posted by Chirag Solanki Aug 20, 2012
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts