jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery - Get/Set Content and Attributes

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery provides methods to manipulate HTML elements and attributes in efficient way.

In this chapter we will explain how to get and set content and attribute values.


The HTML DOM (Document Object Model)

The Document Object Model, usually referred to as the DOM, is an essential part of making websites interactive.

The Document Object Model represents the HTML document that is displayed in a window.

It is an interface that allows jQuery to manipulate the content, structure, and style of a website.


jQuery Get or Set Content - html(), text() and val()

With jQuery we can easily manipulate HTML elements.

We have the following jQuery methods for DOM manipulation:

The following section will show you how to use each method.


jQuery html() Method

The jQuery html() method gets or sets the content (innerHTML) of the selected element(s).

The following example gets the content of first paragraph, when a button is clicked:

Run code

The following example changes the content of all paragraphs, when a button is clicked:

Run code

jQuery text() Method

The jQuery text() method gets or sets the text content of the selected element(s), including their descendants.

The following example gets the text content of all paragraphs, when a button is clicked:

Run code

The following example changes the text content of all paragraphs, when a button is clicked:

Run code

Difference between html() and text()

Both html() and text() methods set or get content of HTML elements, however:

html():

  • Sets or gets the content (text + HTML markup) of selected elements
  • When html() method is used to get content, it returns the content of the first selected element

text():

  • Sets or gets the content (only text) of selected elements
  • When text() method is used to get content, it returns the text content of all selected element

The following example demonstrates the difference between html() method and text() method:

Run code

jQuery val() Method

The jQuery val() method gets or sets the value attribute of the selected FORM element(s).

The following example gets the value of the <input> field:

Run code

The following example sets the value of the <input> field:

Run code

jQuery Get or Set Attributes - attr()

The jQuery attr() method gets or sets attributes and values of the selected elements.

The following example gets the value of src attribute of an image:

Run code

The following example sets the value of src attribute of an image:

Run code

The following example sets multiple attributes and values:

Run code

jQuery HTML Reference

For a complete HTML methods reference, visit our jQuery HTML/CSS Reference.