Introduction to jQuery's text, html, append, prepend, and remove methods.
Selecting and Manipulating Elements
View Slide
Review!!!
$('div')
$('div')get all div elements
$('.article')
$('.article')get elements with class name article
$('#content')
$('#content')get element with id attribute of content
$('.article').each(function() {// what is diff between// this and $(this) herethis;$(this);});
$('.article').each(function() {// what is diff between// this and $(this) herethis;$(this);});this is a plain DOM element, $(this) is a DOMelement bestowed with the power of jQuery
$('.article').each(function() {$(this).css('background', 'pink');});
$('.article').each(function() {$(this).css('background', 'pink');});get all elements with class name of articleand change their background to pink
$('.article').each(function() {$(this).css('color', 'pink');});
$('.article').each(function() {$(this).css('color', 'pink');});get all elements with class name of articleand change their text color to pink
$('.article').each(function() {alert($(this).html());});
$('.article').each(function() {alert($(this).html());});get all elements with class name of articleand alert their innerHTML
New Today!!!
.text()http://docs.jquery.com/Attributes/textThis is my paragraph.<br/>$('#content').text(); // This is my paragraph<br/>Removes all HTML tags and returns just plain text.
.html() vs .text()This is my paragraph.<br/>$('#content').html(); // <p>This is my <strong>paragraph</strong>.</p><br/>$('#content').text(); // This is my paragraph<br/>
.text(val)http://docs.jquery.com/Attributes/text#valThis is my paragraph.<br/>$('#content').text('This is my paragraph.');<br/>This is my paragraph.Sets the plain text of the element. Escapes any HTML.
.html(val) vs .text(val)This is my paragraph.<br/>$('#content').html('<p>My paragraph.</p>');<br/>$('#content').html(); // <p>My paragraph.</p><br/>$('#content').text('<p>My paragraph.</p>');<br/>$('#content').html(); // <p>My paragraph.</p><br/>.text(val) escapes HTML entities like <, > and &.
.appendhttp://docs.jquery.com/Manipulation/appendbest way to insert contentinside of an element at the end
Prep for classTeach class<br/>$('#todo-list').append('<li>Demo append to students</li>');<br/>Prep for classTeach classDemo append to studentsthis was added
.prependbest way to insert content insideof an element at the beginninghttp://docs.jquery.com/Manipulation/prepend
Prep for classTeach class<br/>$('#todo-list').prepend('<li>Wake up and drink coffee</li>');<br/>Wake up and drink coffeePrep for classTeach classthis was added
.removeremoves all matchedelements from the DOMhttp://docs.jquery.com/Manipulation/remove
Prep for classTeach class<br/>$('#todo-prep').remove();<br/>Teach class#todo-prep was removed
Other Manipulation Methodshttp://docs.jquery.com/ManipulationappendTo, prependTo, after, before, insertAfter,insertBefore, wrap, wrapAll, wrapInner,replaceWith, replaceAll, empty, clone
http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-manipulating-and-selecting-elements-continued/Assignment10