jquery HTML (), Text () method detailed

One: HTML ()

html()function is used to set or return HTML content within the DOM element that the current jquery object matches .

The purpose of this function is to set or get the property value of a DOM element innerHTML .

The function belongs to an jQuery object (instance).

Grammar

Jqueryobject.  HTML([])     

Parameters

Parameters	Description
Htmlstring	An optional/string/function type is used to set the HTML string.

If no argument is specified htmlString , the HTML content of the first matching element is obtained, and if a parameter is specified htmlString , the HTML content of all matching elements is Set.

added support for jQuery 1.4: parameters htmlString can be functions. html()The function will be executed according to all the elements of the match, and the this corresponding DOM element will be pointed to in the Function.

html()Two parameters are also passed to the function: the first parameter is the index of the element in the matching element, and the second parameter is the current HTML content of the Element. The return value of the function is the HTML content that needs to be set for the Element.

If htmlString the argument is not a string or function type, it is converted to a string type (toString ()). If the argument is null or undefined , it is treated as an empty string ("").

return value

html()The return value of the function is the string/jquery type, and the actual type of the return value depends on html() the action performed by the Function.

If html() the function performs a set operation, the current jquery object itself is Returned. If you perform a fetch operation, the HTML content of the first matching element is returned, which is the string type.

Example & Description

Take the following HTML code as an example:

<div Id="n1">
<p Id="n2">Hello</p> 
     <p id= "n3" > 
         Codeplayer 
         <span id= "n4" > Focus on programming development technology sharing </span> 
         <span id= "n5" ></span>< Span class= "pln" > 
     </p> 
 </div                 

We write the following jquery code:

Var$n 2=$("#n2");
Alert($n 2.Html() ); Hello
Set HTML content for N2
$n 2.Html( ' <strong>hello world</strong> ' );

Var$n 3=$("#n3");
Alert($n 3.Html() );
/*
Codeplayer
<span id= "n4" > Focus on Programming development technology sharing </span>
<span id= "n5" ></span>
*/

Empties the HTML content of all SPAN elements (sets HTML content to "")
$("span").Html( "" );

Change the HTML content of all P elements to "<em>N</em> p elements, ID this.id"
The n here represents the ordinal number of the element in all matching elements (1, 2, 3 ...).
This.id is the id attribute value of the element
$("p").Html( function (index, Currenthtml 
     //function This points to the P element of the current iteration  
     Span class= "kwd" >return  "§ <em>"  +< Span class= "pln" >  (index + 1)  +  "</em> p element, id"  + this id;   
 });      


two: Text ()

text()function is used to set or return the text content within the DOM element that the current jquery object matches .

The so-called text content, is the HTML content of the element (that is, the innerHTML attribute Value) based on the filter out all the HTML tags after the text content (ie browser Dom element-specific innerText property values).

If the jquery object matches more than one element, the string that is merged with the text() text content in each matching element (containing its descendant elements) is Returned.

The function belongs to an jQuery object (instance).

Grammar

Jqueryobject.  Text([])     

Parameters

Parameters	Description
TextString	The optional/string/function type is used to set the text string.

If no argument is specified textString , the text content is obtained after merging the contents of each matched element , and if a parameter is specified textString , the text content of all matching elements is Set.

added support for jQuery 1.4: parameters textString can be functions. text()The function will be executed according to all the elements of the match, and the this corresponding DOM element will be pointed to in the Function.

text()Two parameters are also passed to the function: the first parameter is the index of the element in the matching element, and the second parameter is the current text content of the Element. The return value of the function is the text content that needs to be set for the Element.

If textString the argument is not a string or function type, it is converted to a string type (toString ()). If the argument is null or undefined , it is treated as an empty string ("").

return value

text()The return value of the function is the string/jquery type, and the actual type of the return value depends on text() the action performed by the Function.

If text() the function performs a set operation, the current jquery object itself is Returned. If you perform a fetch operation, the text content after merging the contents of each matched element is returned, which is the string type.

Example & Description

Take the following text code as an example:

<div Id="n1">
<p Id="n2">Hello</p>
<p Id="n3">
Codeplayer
<span Id="n4">Focus on programming development technology sharing</span>
 <span id="n5"></span>
</p>
<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
</div>                 

We write the following jquery code:

Var$n 2=$("#n2");
Alert($n 2.Text() ); Hello
Set the text content of N2
$n 2.Text( "Hello world" );

Alert($("p").Text()); Back to "Hello world\ncodeplayer\n focus on programming development technology sharing \ n"
Because of the differences in HTML parsers for different browsers, The returned text may be different in terms of line breaks or other whitespace characters.

Var$n 3=$("#n3");
Returns the text content that was filtered out of the HTML tag
Alert($n 3.Text() );
/*
Codeplayer
Focus on programming development technology sharing
*/

Var$n 5=$("#n5");
Although the content of the setting contains strings that conform to HTML tags, these are treated as textual content and are not treated as HTML content
The string "<strong>hello world</strong>" is displayed on the page instead of the bold "Hello world".
This is equivalent to $5.html (' &lt;strong&gt; Hello world&lt;/strong&gt; ');
$n 5.Text( ' <strong>hello world</strong> ' );
Alert($n 5.Text() ); <strong>hello world</strong>


Clears the text content of all span elements (sets the text content to "")
$("span").Text( "" );

Change the text content of all LI elements to "nth <li> elements"
The n here represents the ordinal number of the element in all matching elements (1, 2, 3 ...).
$ Text ( function (index< Span class= "pun" >, Currenttext) { 
     //function points to the LI element of the current iteration  
     return  " +  ( Index + 1) +  "<li> elements" ;                

jquery HTML (), text () method detailed