Scripting DOM and CSS with jQuery

Getting and Setting Element Content

The .html() and .text() methods retrive and update the content of elements.

How To Retrieve Element Content

jQuery method	method meaning
html = $('selector').html()	get the HTML content of the first element in the jQuery selection
text = $('selector').text()	get the textual content from every element in the jQuery selection and any descendant

How To Update Element Content

jQuery method	method meaning
$('selector').html(HtmlString)	update every element in the matched set with the same new markup content
$('selector').text(text)	update every element in the matched set with the same new textual content
$('selector').replaceWith(HtmlString)	replace every element in the matched set with new markup content
Note: If you want to amend only a part of the content of the current selection you can use .html(function) or .replaceWith(function) and pass a function that return html

Example

See the Pen jQuery setting and getting element content by Massimiliano (@maxdesimone) on CodePen.

Inserting Elements Into The Page - Removing Elements From The Page

To create a new element call the jQuery function a pass any HTML Element as string argument:

var $newPar = $('<p> content of the new paragraph </p>');

before() and after() methods insert the new element into the page:

/* the before() method insert the new element before another one */
$('selector').before($newPar);

/* the after() method insert the new element after another one */
$('selector').after($newPar);

prepend() and append() methods insert content into an existing element:

/* the prepend() method inserts the new content before the element content */
$('h2').prepend(' ..:: ');

/* the append() method inserts the new content after the element content */
$('h2').append(' ::.. ');

remove() method removes all of the elements in the matched set:

/* remove all the paragraph elements from the page */
$('p').remove();

Example

See the Pen jQuery inserting elements by Massimiliano (@maxdesimone) on CodePen.

Getting and Setting Attribute Values

You can create new attribute, get or set attribute values by using the method below:

jQuery method	method meaning
$('selector').attr()	get and set attribute values
$('selector').removeAttr()	remove attribute's name and value
$('selector').addClass()	add a new value to class attribute
$('selector').removeClass()	remove a value from class attribute
attr() and removeAttr() methods work with any attribute addClass() and removeClass() methods work with a single class name within the value of the class attribute

Example: the click event on each list item add a value to the CSS class attribute

See the Pen jQuery method for accessing HTML attributes by Massimiliano (@maxdesimone) on CodePen.

Getting and Setting CSS Properties

You can use the css() method to get and set CSS properties

jQuery method	method meaning
prop-value = $('selector').css('prop-name')	returns the property value from the first element in the matched set
$('selector').css('prop-name','prop-value') $('selector').css({ prop-name1:prop-value1, prop-name2:prop-value2, prop-name3:prop-value3 })	set the value of the CSS property for every element in the matched set You can pass the .css() method an object to update multiple properties at once
Note: it's better to change the value of a CSS class rather than to change CSS properties from JavaScript

Example:

See the Pen jQuery method for setting css properties by Massimiliano (@maxdesimone) on CodePen.

Working with Each Element in a Selection

If you need to iterate through the elements of a jQuery selection and perform an operation on each element, you can take advantage of the each() method

$('selector').each(function(index){
  var id = this.id;
  var class = this.class;
  var $this = $(this);
  $this.jQueryMethod();
});

• each() takes a function as parameter
• the index parameter is a counter indicating the current step of iteration
• the this keyword allows you to access the current element of iteration
• use this to access the HTML global attributes of the current element
• use $(this) to invoke jQuery methods on the current element

Example

See the Pen jQuery each method iteration by Massimiliano (@maxdesimone) on CodePen.