Element manipulation

The element manipulation methods allow you to treat a jQuery object as a single HTML element.

Reading methods will be applied to the first element.

Modification methods will be applied to all elements in the jQuery object and return jQuery object.

// builder pattern
var newDiv2 = $("<div>").html("div content")
               .attr("id", "new")
               .addClass("w-50")
               .css({'border': '1px solid red', 'color':'blue'});

$("p").removeClass("myClass noClass")
      .addClass("yourClass");
methods description
html() Returns the HTML content of the first element.
html(str | func)

Sets the HTML content of each element.

The func parameter is a function that returns new HTML content and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • oldhtml - old HTML content
text() Returns content of the first element as text (i.e. without HTML tags).
text(str | func)

Sets the content of each element to the specified text.

The func parameter is a function that returns new text and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • text - old text value
attr(attrName) Returns the attribute value of the first element. To retrieve DOM properties such as the checked, selected, or disabled state of form elements, use the prop() method.
attr(attrName, val | func)

Sets one or more attributes of each element.

The func parameter is a function that returns a new value and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • attr - old value
removeAttr(attrName)

Remove an attribute from each element.

The attrName parameter is an attribute to remove. It can be a space-separated list of attributes.

prop(propName) Returns the property value of the first element.
prop(propName, val | func)

Sets property of each element.

The func parameter is a function that returns a new value and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • oldPropertyValue - old value
prop(props)

Sets one or more properties of each element.

The props parameter is an object of property-value pairs to set.

removeProp(propName)

Removes a property from each element.

Do not use this method to remove native properties such as checked, disabled or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

val() Returns the current value of the first element. Appies to the form elements such as input, select, textarea.
val(val | func)

Sets value for each element.

The func parameter is a function that returns a new value and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • value - old value
addClass(clsNames | func)

Adds classes to each element.

The clsNames can be string with space-separated classes or array of class names.

The func parameter is a function that returns a string with space-separated classes or array of classes and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • currentClassName - existing classes
removeClass(clsNames | func)

Removes classes from each element.

The clsNames can be string with space-separated classes or array of class names.

The func parameter is a function that returns a string with space-separated classes or array of classes and has two arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • className - old classes
toggleClass(clsNames [, state])

Adds or removes classes from each element.

The clsNames can be string with space-separated classes or array of class names.

The state parameter is a boolean (not just truthy/falsy) value that determines whether the class should be added or removed.

toggleClass(func [,state])

Adds or removes classes from each element.

The state parameter is a boolean (not just truthy/falsy) value that determines whether the class should be added or removed.

The func parameter is a function that returns a string with space-separated classes or array of classes and has three arguments:

  • index - the index of the current element (you can use the this keyword to access it)
  • className - old classes
  • state