Easy Tutorial
❮ Jquery Plugin Message Jquery Traversing Ancestors ❯

jQuery - Getting Content and Attributes


jQuery has powerful methods to manipulate HTML elements and attributes.


jQuery DOM Manipulation

A very important part of jQuery is the ability to manipulate the DOM.

jQuery provides a set of methods related to the DOM, making it easy to access and manipulate elements and attributes.

| | DOM = Document Object Model (Document Object Model) <br> <br> The DOM defines a standard for accessing HTML and XML documents: "The W3C Document Object Model is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." | | --- | --- |


Getting Content - text(), html(), and val()

Three simple and practical jQuery methods for DOM manipulation:

The following example demonstrates how to get content using jQuery text() and html() methods:

Example

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

The following example demonstrates how to get the value of an input field using jQuery val() method:

Example

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Getting Attributes - attr()

The jQuery attr() method is used to get the value of an attribute.

The following example demonstrates how to get the value of the href attribute in a link:

Example

$("button").click(function(){
  alert($("#tutorialpro").attr("href"));
});

The next chapter will explain how to set (change) content and attribute values.

❮ Jquery Plugin Message Jquery Traversing Ancestors ❯