The Html,val,text difference in jquery

In project development, writing jquery code sometimes confuses things, and now write the demo to list the differences of jquery's. html (),. Text (),. Val ().

1. HTML () Gets the content of the first matching element, which simply means everything that is contained in the obtained tag.

If there is a Val in parentheses, the simplest thing to understand is to replace all the previous steps with Val in parentheses, and see the demo

1     <DivID= "Divtest" value= ' 2 '>2 This is the content of Div! 3         <labelID= "Lbltext">4 This is the content of the label! 5         </label>6         <DivID= "DivTest2">7 a second div content! 8         </Div>9     </Div>

This is the HTML document structure, now we execute the following JS code to see what is achieved

1  $ ("#divTest"). html ()  // acquired content: This is the content of Div! <label id= "Lbltext" > This is the content of the label! </label> <div id= "DivTest2" > second div content! </div>

1  $ ("#divTest"). HTML ("I'm going to modify it!") ")  // perform the modification

After the above modification, we then get

1 $ ("#divTest"). HTML () // acquired content: I want to change it!

Note: the HTML () method can be used for XHTML documents, but not FOR XML documents!

2.text (): Gets the contents of all matching elements, and the result is text that is combined with the text content contained by all matching elements, and text (val) is the textual content that sets all matching elements

　　

1 // What you get: This is the content of Div! This is the content of the label! A second div content!  2                             // visible is obtained is the tag inside the thing, but does not take the label

Note: This method is valid for both HTML and XML documents

3.val () commonly used to manipulate standard form component objects, such as Button,text,hidden

For example, a SELECT element and an hidden element are added.

1     <SelectID= "Selectval">2         <optionvalue= "1"selected= "Selected">1</option>3         <optionvalue= "2" >2</option>4     </Select>5     <inputtype= "hidden"ID= "Hidval"value= "1"/>

Now let's pick up their values.

1 $ ("#selectVal"). Val ()  //obtained value is: 1  Similarly this is also $ ("#hidVal"). Val ()

　　

Sometimes in the development of a div to set the value of a property, then we can use this value

　　

1 $ ("#divTest"). attr (' value ')

If it is inappropriate, please treatise!

The Html,val,text difference in jquery