Difference between .text() and .html()

【Foreword】

I have encountered the difference between .html() and .text() before, and I will summarize it today.

【List】

（1）.html()；

（2）.text();

（3）.val();

【Details】

（1）.html();

Read and modify the HTML tags of elements, corresponding to innerHTML in js

.html() is used to read the HTML content of the element (including its Html tags)

Note: When the .html() method is used on multiple elements , only the first element is read

The innerHTML property of the DOM is used inside the method to process, so one of the most important issues to pay attention to in setting and obtaining, this operation is for the entire HTML content (not only the text content, element tags are also included)

（2）.text();

Read and modify the plain text content of the element, corresponding to innerText in js

.text() is used to read the plain text content of an element, including its descendants;

Note: The .text() method cannot be used on form elements

The result returns a string containing the combined text of all matched elements

（3）.val();

Read or modify the value of a form element

.val() is used to read the "value" value of the form element

Note: .val() can only be used on form elements , such as <input>, <button>, <textarea>, <select>, <option>, etc.

①Process the select element through .val(), when no option is selected, it returns null

②.val() method is mostly used to set the value of the field of the form

③ If the select element has the multiple attribute and at least one option is selected, the .val() method returns an array. This array contains the value of each checked option

【the difference】

(1) Number of reads

The .val() method is the same as .html(), if it is applied to multiple elements, it can only read the "value" value of the first form element, but .text() is different from them, if .text () when applied to multiple elements, will read the text content of all selected elements

(2) read content

Although the three methods of .html(), .text(), and .val() are all used to read the content of the selected element;

　　　　.html() is used to read the html content of the element (including html tags);

　　　　.text() is used to read the plain text content of an element, including its descendant elements;

　　　　.val() is used to read the "value" value of the form element;

(3) .html(), .text(), .val() can use the return value of the callback function to dynamically change the content of multiple elements

<html>  
<head>  
  <style>  
  p { color:blue; margin:8px; }  
  b { color:red; }  
  </style>  
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
</head>  
<body>  
  <p><b>Test</b> Paragraph.</p>  
  <p></p>  
<script>  
var str = $("p:first").text();  
$("p:last").html(str);  
</script>  
</body>  
</html>

result:

【Summarize】

Simple understanding:

html is where you can add tags like <a></a>, <p></p> etc.

text can only write text, if the above markup is written, it will be output in text form

val is an attribute, only objects with this attribute can be called (form elements)

Difference between .text() and .html()

Guess you like