jQuery Getting/Setting

One of the most important parts of jQuery is the possibility of manipulating the DOM.

jQuery provides effective methods for manipulating HTML elements and attributes.

In this chapter, we will explain how jQuery gets and sets element content and attribute values.

HTML DOM (Document Object Model)

Document Object Model, which is usually calledDOM, which is an important part of making websites interactive.

Document Object Modelrepresents an HTML document 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 operations:

• html()

• text()

• val()

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

jQuery html() method

jQuery html()method to get or set the content of the selected element (innerHTML).

The following example retrieves the content of the first paragraph when the button is clicked:

$("button").click(function(){
　　alert($("p").html());
});

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

$("button").click(function(){
　　$("p").html("I want to say:  <b>Hello world</b>
});

jQuery text() method

jQuery text()method to get or set the text content of the selected element (including its descendants).

The following example retrieves the text content of all paragraphs when the button is clicked:

$("button").click(function(){
　　alert($("p").text());
});

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

$("button").click(function(){
　　$("p").text("I want to say:  Hello world");
});

the difference between html() and text()

html()andtext()methods can both set or get the content of HTML elements, but there are the following differences:

html():

• to set or get the content of the selected element (text+ HTML tags）

• when using the html() methodto getwhen the content is changed, it will returnthe content of the first selected element

text():

• to set or get the content of the selected element (only text）

• when using the text() methodto getwhen the content is changed, it will returnall selected elementstext content

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

$("#btn1").click(function(){
　　$("p").html("I want to say:  <b>Hello world</b>
});
$("#btn2").click(function(){
　　$("p").text("I want to say:  <b>Hello world</b>
});

jQuery val() method

jQuery val()method to get or set the value attribute of the selected form element.

The following example retrieves<input>Field value:

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

The following example sets<input>Field value:

$("button").click(function(){
　　$("input").val("Hello　world");
});

jQuery Get or Set Property-attr()

jQuery attr()method to get or set the attributes and values of the selected elements.

The following example gets the image'ssrcAttribute value:

$("button").click(function(){
　　$("img").attr("src");
});

The following example sets the image'ssrcAttribute value:

$("button").click(function(){
　　$("img").attr("src",　"logo_jquery.png");
});

The following example sets multiple attributes and values:

$("button").click(function(){
　　$("img").attr({
　　　　alt:　"Seagull　Icon",
　　　　title:　"Image　by　Seagull",
　　　　width:　"350px",
　　　　height:　"300px"
　　});
});

jQuery HTML Reference

For complete HTML method references, please visit ourjQuery HTML / CSS Reference.