jquery的html()和text()、有参和无参的区别

最新推荐文章于 2022-06-20 12:30:00 发布

weixin_30732825

最新推荐文章于 2022-06-20 12:30:00 发布

阅读量113

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wang1537/archive/2012/10/12/2720920.html

版权

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4     <title>测试jquery的html()和text()</title>
 5     <style type="text/css">
 6         body { margin: 20px }
 7         div { border: solid 1px #00FF00; width: 200px; height: 150px; margin: 12px }
 8         span { border: solid 1px #B6002E; width: 10px; height: 10px; margin: 3px }
 9     </style>
10     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
11     <script type="text/javascript">
12         function text1(){
13             $("#a1").text("<span>haha</span>123");
14         }
15         function html1(){
16             $("#a1").html("<span>haha</span>123")
17         }
18         function text2() {
19             alert($("#a2").text());
20         }
21         function html2() {
22             alert($("#a2").html());
23         }
24     </script>
25 </head>
26 
27 <body>
28     <input type="button" onclick="text1()" value="text([para])"/>
29     <input type="button" onclick="html1()" value="html([para])"/>
30     <p>可以这样理解，在有参数的情况下，$.text([para])给匹配元素增加了一个string</p>
31     <p>而$.html([para])给匹配元素增加的是一段html代码</p>
32     <div id="a1"></div>
33     <br/>
34     <input type="button" onclick="text2()" value="text()"/>
35     <input type="button" onclick="html2()" value="html()"/>
36     <p>同样，在无参的情况下，$.text()获得的是匹配元素中的字符串，不包含html代码</p>
37     <p>而$.html()获得的是匹配元素中的一切，包含html代码</p>
38     <div id="a2"><span>AA</span>456</div>
39 </body>
40 </html>

把代码复制出来，保存成html格式可以运行看效果。

转载于:https://www.cnblogs.com/wang1537/archive/2012/10/12/2720920.html

weixin_30732825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的html()和text()、有参和无参的区别

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>测试jquery的html()和text()<...
复制链接

扫一扫