Examples of HTML of text of val of in JQuery

  • 2020-03-30 03:47:18
  • OfStack

1. The HTML

HTML (): gets the HTML content of the first matched element. This function cannot be used with XML documents. But it can be used with XHTML documents
HTML (val): sets the HTML content of each matched element. This function cannot be used with XML documents. But it can be used with XHTML documents.

2. The TEXT

Text (): gets the contents of all matched elements.
The result is a text composed of the text content contained in all matched elements. This method works for both HTML and XML documents.
Text (val): sets the text content of all matched elements
Similar to HTML (), but will encode HTML ("<") And ">" Replace with the corresponding HTML entity.

3. The VAL

Val (): gets the current value of the first matched element.
Val (val): sets the value of each matched element.

The above is copied from JQuery's help documentation, and there's no more nonsense. Here are some exercises you can do yourself, with the following code:
While doing this exercise I noticed another difference between HTML and text
When HTML () goes to the content of an element, it fetches the format below the selected element.
Such as: < Div id = "divShow" > < B> < I> Write Less Do More< / i> < / b> < / div>
Var strHTML = $("#divShow").html(); Take it,
The result: < B> < I> Write Less Do More< / i> < / b>
If we use var strHTML2 = $("#divShow b I ").html(); Take it
The result is Write Less Do More
Text doesn't have the first case,
Var strText = $("#divShow").text(); Take it
The result is Write Less Do More


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script src="js/jquery.js" type="text/javascript"></script>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<title>  Gets or sets the contents of the element </title>
<style type="text/css">
body{font-size:15px;text-align:center}
div{border:solid 0px #666;padding:5px;width:220px;margin:5px}
</style>
<script type="text/javascript">
$(function() {
var strHTML = $("#divShow").html();//Get the HTML content (including the two formats under div)
var strHTML2 = $("#divShow b i").html(); //Get HTML content
var strHTML3 = $("div").html();
var strText = $("#divShow").text();//Get text content
var strText2 = $("div").text();

$("#divHTML").html(strHTML);//Set the HTML content
$("#divHTML2").html(strHTML2); //Set the HTML content
$("#divHTML3").html(strHTML3); //Set the HTML content
$("p").html(strHTML);

$("#divText").text(strText);//Set the text content
$("#divText2").text(strText2);//Set the text content
$("a").text(strText);

$("select").change(function() { //Set the listbox change event
//Gets the value of all the options selected in the list box
alert($("select").val());
var strSel = $("select").val().join(",");
$("input").val(strSel); //Displays the values of all the options selected in the list box
})
})
</script>
</head>
<body>
<table border="1" bordercolor="#A9A9A9" cellspacing="0">
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
<td> This is the original content </td>
</tr>
<tr>
<td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
<td> This is the original content </td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divHTML">1</div></td>
<td> Get the original content ( The format of the associated content ) After the html Methods the output </td>
</tr>
<tr>
<td><div id="divHTML2">2</div></td>
<td> Get the original content ( Format without content ) After the html Methods the output </td>
</tr>
<tr>
<td><div id="divHTML3">3</div></td>
<td> Get the original content ( Gets the contents of the first matched element ) After the html Methods the output </td>
</tr>
<tr>
<td><p></p></td>
<td>HTML Method to set the text of a paragraph </td>
</tr>
<tr>
<td><p></p></td>
<td> If this also has content, it sets the content of each matched element </td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td><div id="divText">4</div></td>
<td> After obtaining the original content text Methods the output </td>
</tr>
<tr>
<td><div id="divText2"></div></td>
<td> Get the original content ( Gets the contents of all matched elements ) After the text Methods the output </td>
</tr>
<tr>
<td><a></a></td>
<td>TEXT Method to set the text of a paragraph </td>
</tr>
<tr>
<td><a></a></td>
<td> If this also has content, it sets the content of each matched element </td>
</tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
<tr>
<td>

<select multiple="multiple"style="height:96px;width:85px">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<select>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9" selected>Item 9</option>

</select>
</td>
<td>
</td>
</tr>
<tr>
<td><input ></input></td>
<td><input ></input></td>
</tr>
</table>
</body>
</html>

You can also verify by yourself, the above is my experiment, I use JQuery is 1.6


Related articles: