Text (), HTML (), and Val () and InnerText, innerHTML, and value in jquery

Source: Internet
Author: User

Set or get the value of the selection in *jquery:
Text (); Sets or gets the textual content of the selected element;

HTML (); Sets or gets the contents of the selected element (including HTML tags);

Val (); Sets or gets the value of the form field (provided the form has the Value property set);

(text () and HTML () the difference is that the former is the processing of text content, can only write text if the above markup is written in the form of text output, the latter can parse the text of the HTML tag, you can add like <a></a>, <p> </p> and so on, the final result will be resolved to its effect.
)

Sets or gets the value of the selection in the *javascript

Similarly innertext, innerHTML, and value,

Both InnerText and innerHTML are a function that puts a string into a HMTL tag.
But innerHTML he can parse the HMTL tag
For example you put in a <a> Stephen </a> if in Div it will appear an underlined element A;
But innertext only supports ordinary strings;

* The specific code is as follows:
In jquery:

<HTML>
<Head>
<Scriptsrc= "/jquery/jquery-1.11.1.min.js"></Script>
<Script>
$ (document). Ready (function(){
$("#btn1"). Click (function(){
Alert ("Text:" + $("#test"). text ());
});
$("#btn2"). Click (function(){
Alert ("HTML:" + $("#test"). HTML ());
});
});
</Script>
</Head>

<Body>
<PID= "Test">This is in the paragraph<b>Bold</b>Text.</P>
<ButtonID= "BTN1">Display text</Button>
<ButtonID= "BTN2">Display HTML</Button>
</Body>

</HTML>

In javascript:

<!DOCTYPE HTML>
<HTML>
<Head>
<Scriptsrc= "/jquery/jquery-1.11.1.min.js"></Script>
<Script>
functiongetinnerhtml () {
Alert (document.getElementById ("BTN1"). Value);
}
</Script>
</Head>

<Body>
<PID= "Test">This is in the paragraph<b>Bold body</b>Text.</P>
<ButtonID= "BTN1"onclick= "getinnerhtml ()" >Display text</Button>
<ButtonID= "BTN2">Display HTML</Button>
</Body>

</HTML>

A summary of the differences between jquery and javascript:

* The former Click event is the acquisition element ID for processing; the latter is onclick= "getinnerhtml ()";

* The former Gets the value of the element is text (), the latter is innertext, none (); When setting the value, the former is text ("Jing"), the latter is innertext= "Jing";

* Note: When both are set, the original content is overwritten, and if you want to insert it, use the Insert method.

Other:

. HTML () corresponds to innerHTML in JS for reading and modifying HTML tags of elements

. HTML () is used to read the HTML content of an element (including its HTML tag), and the. HTML () method reads only the first element when used on multiple elements

. Text () to read or modify the plain text content of the element corresponding to the innertext in JS

Text () is used to read the plain text content of an element, including its descendant elements; The text () method cannot be used on a FORM element

. Val () is used to read or modify the value values of form elements

. Val () is the value that is used to read the form elements,. val () can only be used on form elements

About the difference between the three

1. The Val () method is the same as. html (), and can only read the value of the first FORM element if it is applied on more than one element, but. Text () is not the same as they are, if. Text () is applied on more than one element, the text content of all the selected elements is read.

2. HTML (),. Text (),. Val () can use the return value of the callback function to dynamically change the contents of multiple elements.

Text (), HTML (), and Val () and InnerText, innerHTML, and value in jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.