jquery_ref_html

jQuery HTML & CSS Manipulation

jQuery HTML / CSS Methods

jQuery provides a rich set of methods for manipulating the Document Object Model (DOM), allowing you to easily get and set content, modify attributes and properties, change styles, and alter the structure of your HTML documents.

The following table lists key methods for HTML and CSS manipulation:

Method	Description
Content Manipulation
.html()	Gets the HTML contents of the first element or sets the HTML contents of every matched element.
.text()	Gets the combined text content of all matched elements or sets the text content of every matched element (HTML tags are treated as text).
.val()	Gets the current value of the first element (typically form elements like input, select, textarea) or sets the value of every matched element.
Attribute & Property Manipulation
.attr()	Gets the value of an HTML attribute for the first element or sets one or more attributes for every matched element. Use for standard HTML attributes.
.removeAttr()	Removes an attribute from each matched element.
.prop()	Gets the value of a DOM property for the first element or sets one or more properties for every matched element. Crucial for boolean properties/attributes like checked, selected, disabled.
.removeProp()	Removes a property set by .prop() from the set of matched elements. Use with caution.
Class Manipulation (Best Practice for Styling)
.addClass()	Adds one or more class names to each element in the set.
.removeClass()	Removes one or more class names from each element in the set.
.toggleClass()	Adds or removes one or more classes, depending on presence. Can take a boolean switch.
.hasClass()	Determines whether any of the matched elements are assigned the given class.
CSS Manipulation
.css()	Gets the computed style property for the first element or sets CSS properties for all matched elements. (Prefer class manipulation for complex/reusable styling).
Inserting Elements
.append()	Inserts content, specified by the parameter, to the end of each element in the set.
.appendTo()	Inserts every element in the set to the end of the target.
.prepend()	Inserts content, specified by the parameter, to the beginning of each element in the set.
.prependTo()	Inserts every element in the set to the beginning of the target.
.after()	Inserts content, specified by the parameter, after each element in the set.
.insertAfter()	Inserts every element in the set after the target.
.before()	Inserts content, specified by the parameter, before each element in the set.
.insertBefore()	Inserts every element in the set before the target.
Removing Elements
.remove()	Removes the set of matched elements (including data and events) from the DOM.
.detach()	Removes the set of matched elements from the DOM, but keeps associated data and events (useful for reinsertion).
.empty()	Removes all child nodes and content from the set of matched elements.
Replacing Elements
.replaceWith()	Replaces each element in the set with the provided new content.
.replaceAll()	Replaces the target element(s) with the set of matched elements.
Wrapping Elements
.wrap()	Wraps an HTML structure around each element in the set.
.wrapAll()	Wraps an HTML structure around all elements in the set.
.wrapInner()	Wraps an HTML structure around the content of each element in the set.
.unwrap()	Removes the parent of the set of matched elements.
Copying Elements
.clone()	Creates a deep copy of the set of matched elements (optionally copying events and data).
Dimensions
.height() / .width()	Gets the current computed height/width or sets the height/width of matched elements.
.innerHeight() / .innerWidth()	Gets the current computed inner height/width (including padding, not border).
.outerHeight() / .outerWidth()	Gets the current computed outer height/width (including padding and border, optionally margin).
Positioning
.offset()	Gets the current coordinates of the first element, or sets the coordinates of every element, relative to the document.
.position()	Gets the current coordinates of the first element relative to its offset parent.
.offsetParent()	Gets the closest ancestor element that is positioned.
.scrollTop() / .scrollLeft()	Gets the current vertical/horizontal scroll position for the first element or sets the scroll position for all matched elements.

Key Distinction: .attr() vs .prop()

Attributes are defined by HTML (e.g., <input type="checkbox" checked="checked" id="myCheck">), while properties belong to the DOM object in JavaScript.

For boolean attributes like checked, selected, or disabled, always use .prop() to check their state or set them.

// Correct way to check if a checkbox is checked:
if ($("#myCheck").prop("checked")) { ... }

// Correct way to disable a button:
$("#myButton").prop("disabled", true);

// Getting an HTML attribute value:
let inputType = $("#myCheck").attr("type"); // Returns "checkbox"

Using .attr() for these boolean states can lead to inconsistent results across browsers.