General jQuery DOM Manipulation Methods

The attr() method sets or returns the selected elements' attributes and values.

This method returns the value of the FIRST matched element when used to replace the attribute value.

Syntax of attr method in jQuery

• Return the attribute's value:

$(selector).attr(attribute)

• Set the attribute and value:

$(selector).attr(attribute,value)

• Set attribute and value using a function:

$(selector).attr(attribute,function(index,currentvalue))

• Set multiple attributes and values:

$(selector).attr({attribute:value, attribute:value,...})

Example of jQuery attr method

Set an image's width attribute:

$("button").click(function(){
$("img").attr("width","500");
});

The prop() method sets or returns the selected elements' properties and values.

This method returns the value of the FIRST matched element when used to replace the property value.

This method sets one or more property/value pairs for the set of matched elements when used to assess property values.

Syntax of prop method in jQuery

• Return the property's value:

$(selector).prop(property)

• Set the property and value:

$(selector).prop(property,value)

• Set property and value using a function:

$(selector).prop(property,function(index,currentvalue))

• Set multiple properties and values:

$(selector).prop({property:value, property:value,...})

Example of jQuery prop method

Add and remove the "colour" property:

$("button").click(function(){
var $x = $("div");
$x.prop("color", "FF0000");
$x.append("The color property: " + $x.prop("color"));
$x.removeProp("color");
});

Note: The prop() method should retrieve property values, such as DOM properties (tagName, nodeName, and default checked) or custom properties.

Tip: Use the attr() method instead to retrieve HTML attributes.

Tip: Use the removeProp() method to remove a property.

This method removes one or more attributes from the chosen components.

Syntax of removeAttr method in jQuery

$(selector).removeAttr(attribute)

Example of jQuery removeAttr method

All

elements should have the style attribute removed:

elements should have the style attribute removed:

$("button").click(function(){
$("p").removeAttr("style");
});

The prop() method sets a property, and the removeProp() method removes the process. 

Syntax of removeProp method in jQuery

$(selector).removeProp(property)

Example of jQuery removeProp method

Add and remove the "colour" property:

$("button").click(function(){
var $x = $("div");
$x.prop("color", "FF0000");
$x.append("The color property: " + $x.prop("color"));
$x.removeProp("color");
});

The value attribute of the selected elements is returned or set by the val() method.

When it is used to return a value, it'll look like this: This method returns the value of the FIRST matched element's value attribute.

Syntax of val method in jQuery

• Return the attribute's value:

$(selector).val()

• Set the value attribute:

$(selector).val(value)

• Set the value attribute using a function:

$(selector).val(function(index,currentvalue))

Example of jQuery val method

Set the input> field's value to:

$("button").click(function(){
$("input:text").val("Glenn Quagmire");
});

Tip: The val() method is most commonly associated with HTML form elements.

The clone() method copies a set of elements, such as child nodes, text, and attributes.

Syntax of clone method in jQuery

$(selector).clone(true|false)

Example of jQuery clone method

All

elements should be cloned and inserted at the end of the body> feature:

$("button").click(function(){

$("p").clone().appendTo("body");

});