Manipulating elements and content

The Manipulation section of jQuery's API is again extensive, but I find some of the functions useful for helping along my WordPress and jQuery enhancements. For example, if you make something expandable or retractable, you'll need an element for the user to handle that event, rather than having to go into every post and add control buttons (or remind your client or site editors to add control links or buttons to each post—yeah, they'll do that). You can add and remove content and HTML elements on the fly, using jQuery.

The most useful functions are the prepend() and append() functions allowing you to include text before or after your selection. These functions allow you to focus on content, or specific selectors within your selection, whichever is easiest for you to target.

The next most useful functions are the before() and after() and instertBefore() and instertAfter () functions. If you find you need to wrap elements inside a class name or HTML element to add extra styling, that's no problem with the wrap () function. You can even remove and clone elements! Let's take a look at these manipulation functions in more detail.

Example

Syntax

Description

.append(html & text)

jQuery(".post")

Inserts content in the

.append("<b>post ends

here</ parameter, to the end of each

b>") ;

selected element.

.appendTo(selector)

jQuery("<b>post ends

Does the same thing as

here</b>").appendTo("

append, just reverses the

.post") ;

element selection and content

parameter.

.prepend(html & text)

jQuery(".post")

Inserts content in the

.prepend("<b>post starts

parameter, to the beginning of

here</b>");

each selected element.

Example

Syntax

Description

.prependTo(selector)

.after(string) .insertAfter(selector)

.before(HTML & text) .insertBefore(selector)

.wrap(html or functionName)

.wrapAll(HTML)

.wrapInner(selector)

.text(text only-HTML chars will be escaped)

Does the same thing as prepend, just reverses the element selection and content parameter.

Inserts content in the .after("<b>This goes after</parameter, after and outside b>") ; of each selected element.

jQuery("<b>post starts here</b>").prependTo(" •post");

jQuery(".post")

jQuery("<b>This goes after</b>") .insertAfter(" •post");

jQuery(".post") .before("<b>This goes before</b>");

jQuery("<b>This goes before</b>") .insertBefore("class");

jQuery(".post") .wrap("<div class=".fun" />");

jQuery(".post") . wrapAll("<div class=".fun" />") ;

jQuery(".post") .wrapInner("<div class=". fun" />") ;

jQuery(".post") .html("<h2>Replacement Text</h2>");

jQuery(".post") .text("Replacement Text")

Does the same thing as after, just reverses the element selection and content parameter.

Inserts content in the parameter, before and outside of each selected element.

Does the same thing as before, just reverses the element selection and content parameter.

Wraps an HTML structure around each selected element. You can also construct a function that will wrap each element in HTML.

Similar to wrap, but places the HTML structure around all of the elements together, not each individual element.

Similar to wrap, but it places the HTML structure inside each of the selected elements around any text or child elements of each selected element.

Replaces any content and child elements of selected items with the content in the parameter.

Similar to HTML, but text only. Any HTML characters will be escaped as ASCII codes.

Example

Syntax

Description

.empty(selector)

jQuery(" .entry");

.post")

.empty("

Deletes any content and child elements of a selected element. Leaves the element.

.remove(selector)

jQuery("

.post")

.remove() ;

Similar to empty but deletes the entire element.

.clone(selector)

jQuery("

.post")

.clone() ;

Duplicates the selected elements.

Here we can see how easy it is to use these types of functions:

jQuery(".post").append("<div style='text-align:right; border-bottom: 1px solid #333'>End of Post</div>");

The above jQuery script adds End of Post to the end of every post as seen in the following screenshot:

dolor in repreiienderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat noil proident, sunt in culpa qui officia deserunt mollit an im id est laborura.

Posted in Uncat&qorized ] Leave a comment

End of Post

Dolor sit amet

Posted on January 27. 2010 by admin

Lorem ipsum dolor sit amet, cutis ectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniara, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conseqnat. Dnis aute irure dolor in repreiienderit in voluptate velit esse cillum dolore eu fugiat nuila pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt raollit anim id est laborura.

Lorem ipsum dolor sit amet, cons ectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qnis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conseqnat. Dnis ante irure dolor in repreiienderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Posted in Uncateqorized ] Leave a comment

End of Post

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment