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);
Comments
@Andy:
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.
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.
I agree with Dan - chaining is cool, but good formatting with chaining is a must.
