Traversing the DOM

.append and .prepend are going to be your most used DOM functions. However, you'll find .wrapAll invaluable for helping contain any new elements you create.

Example

Syntax

Description

.append(html & text) .appendTo(selector)

.prepend(html & text) .prependTo(selector)

.after(string) .insertAfter(selector) .before(html & text) .insertBefore(selector)

jQuery(".post") .append("<b>post ends here</b>");

jQuery("<b>post ends here</b>").appendTo(" .post");

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

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

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

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

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

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

Inserts content in the parameter, to the end of each selected element.

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

Inserts content in the parameter, to the beginning of each selected element.

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

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

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.

Example

Syntax

Description

.wrap(html or functionName)

.wrapAll(html)

.wrapInner(selector)

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

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")

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.

Was this article helpful?

0 0
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