Creating a new DOM element with jQuery
I've been using jQuery for a while now keep meaning to blog about the little bits I use often. One is creating a DIV object on the fly and loading content in to it.
1$(document).ready(function(){
2 // Your URL of the page to be loaded
3 u = "/index.cfm?event=contactme";
4
5 // We're creating a div element to load the URL contents into
6 div = $("<div>");
7
8 // When the element is displayed at first we could leave it blank
9 // or a loading image, or in this case the wording loading......
10 div.html("Loading......");
11
12 // We now load our file and inject it into the DOM.
13 div.load(u);
14
15 // With the DIV getting its content we need to put the DOM on the page
16 // and in to the body. $.prepend will put our content at the top of
17 // of the <body>
18 $("body").prepend(div);
19})
2 // Your URL of the page to be loaded
3 u = "/index.cfm?event=contactme";
4
5 // We're creating a div element to load the URL contents into
6 div = $("<div>");
7
8 // When the element is displayed at first we could leave it blank
9 // or a loading image, or in this case the wording loading......
10 div.html("Loading......");
11
12 // We now load our file and inject it into the DOM.
13 div.load(u);
14
15 // With the DIV getting its content we need to put the DOM on the page
16 // and in to the body. $.prepend will put our content at the top of
17 // of the <body>
18 $("body").prepend(div);
19})
Instead of having "Loading...." being displayed you can delay showing the content of the DIV until loading is completed.
1// Your URL of the page to be loaded
2 u = "/index.cfm?event=contactme";
3
4 // We're creating a div element to load the URL contents into
5 div = $("<div>");
6
7 // We now load our file and inject it into the DOM.
8 div.load(u);
9
10 // By default we're going to hide the DIV until the content is loaded
11 div.hide();
12
13 // Before the DIV gets its content we need to put the DOM on the page
14 // and in to the body. $.prepend will put our content at the top of
15 // of the <body>. But this will be hid.
16 $("body").prepend(div);
17
18
19 // Now we load the content into the DOM and as a CALLBACK function
20 // we SLIDEDOWN the div. This could be FADEIN or something else.
21 div.load(u, {limit: 25}, function(){
22 div.slideDown();
23 });
2 u = "/index.cfm?event=contactme";
3
4 // We're creating a div element to load the URL contents into
5 div = $("<div>");
6
7 // We now load our file and inject it into the DOM.
8 div.load(u);
9
10 // By default we're going to hide the DIV until the content is loaded
11 div.hide();
12
13 // Before the DIV gets its content we need to put the DOM on the page
14 // and in to the body. $.prepend will put our content at the top of
15 // of the <body>. But this will be hid.
16 $("body").prepend(div);
17
18
19 // Now we load the content into the DOM and as a CALLBACK function
20 // we SLIDEDOWN the div. This could be FADEIN or something else.
21 div.load(u, {limit: 25}, function(){
22 div.slideDown();
23 });
Both sets of code will load on document ready. Usually I tie this kind of process to a click event to load in a page dynamically when needed.
Also don't forget you can chain these methods too and cut down on code. Taking the first example it could be written as:
1u = "/index.cfm?event=hermes.contactSeller";
2 div = $("<div>").html("Loading......").load(u);
3 $("body").prepend(div);
2 div = $("<div>").html("Loading......").load(u);
3 $("body").prepend(div);
| Tweet |
Comments (2) | 
Print |
Send |
8777 Views
| If you like what you see on the website and/or this post has helped you out in some way please consider donating to help keep me in beer vodka. The donations are made through Paypal, which accepts almost any credit card or eCheck. |
You could further chain to one line:
var div = $("<div>").html("Loading......").load("/index.cfm?event=hermes.contactSeller").appendTo("body");
However, I normally would format that to something like:
// create div
var div = $("<div>")
// add loading message
.html("Loading......")
// load AJAX content
.load("/index.cfm?event=hermes.contactSeller")
// add DIV to body
.appendTo("body");
I'm sure the spacing won't show up correctly, but I tab indent the html(), load() and appendTo() methods. If I have a method that changes the chain, then I further intend lines under that and then would unident for each end() method.