jquery的元素的文本内容与HTML内容操作的区别
2017-04-12 10:53
537 查看
一 应用
获取和设置元素的文本内容与HTML内容
二 代码
三 运行效果
四 运行分析
1、在应用text()设置文本内容时,即使内容中包含HTML代码,也将被认为是普通文本,并不能作为HTML代码被浏览器解析,而应用html()设置的HTML内容中包括的HTML代码就可以被浏览器解析。
2、应用text()方法获取文本内容时,将获取全部匹配元素中包含的文本内容,而应用html()方法获取HTML内容时,则只获取第一个匹配元素中包含的HTML内容。
大小: 23 KB
查看图片附件
获取和设置元素的文本内容与HTML内容
二 代码
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script> 应用text()方法设置的内容 <div id="div1"> <span id="clock">当前时间:2011-07-06 星期三 13:20:10</span> </div> <br />应用html()方法设置的内容 <div id="div2"> <span id="clock">当前时间:2011-07-06 星期三 13:20:10</span> </div> <script type="text/javascript"> $(document).ready(function(){ $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容</span>"); $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>"); alert("通过text()方法获取:\r\n"+$("div").text()+"\r\n通过html()方法获取:\r\n"+$("div").html()); }); </script>
三 运行效果
四 运行分析
1、在应用text()设置文本内容时,即使内容中包含HTML代码,也将被认为是普通文本,并不能作为HTML代码被浏览器解析,而应用html()设置的HTML内容中包括的HTML代码就可以被浏览器解析。
2、应用text()方法获取文本内容时,将获取全部匹配元素中包含的文本内容,而应用html()方法获取HTML内容时,则只获取第一个匹配元素中包含的HTML内容。
大小: 23 KB
查看图片附件
相关文章推荐
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- jquery之设置元素内容(替换HTML或文本内容,使用html()和text()方法)
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- 3.2.10: jQuery的DOM操作之设置和获取HTML、文本和值
- jquery动态增加text元素以及删除文本内容实例代码
- jQuery 操作元素的属性和内容
- JavaScript- 通常用于操作 HTML 元素\通过指定的 id 来访问 HTML 元素,并改变其内容\写到文档输出
- jquery删除指定的html标签并保留标签内文本内容的方法
- jQuery插件:用于获取元素自身的HTML内容
- JQuery之五:操作元素内容
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别
- 用jquery如何获取select元素中当前选择的文本内容
- jQuery 操作 html 元素的例子 (input/select/checkbox/radio)
- jQuery获取文本节点之 text()/val()/html() 方法区别
- JQuery的html函数(元素内容)
- jQuery - Manipuliation操作 - after在每个匹配的元素之后插入内容
- jQuery获取文本节点之 text()/val()/html() 方法区别 详细出处参考:http://www.jb51.net/article/26431.htm
- jQuery 操作动态加载的html 元素
- Jquery如何获取某个元素前(后)的文本内容