js 通过html()及text()方法获取并设置p标签的显示值


Posted in Javascript onMay 14, 2014

html()方法

此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容。要获取某个元素的内容,可以这样:

var p_html = $("p").html(); //获取p元素的HTML代码

如果需要设置某元素的HTML代码,那么也可以使用该方法,不过需要为它传递一个参数。例如要设置p元素的HTML代码,可以使用如下代码:
//设置p元素的HTML代码 
$("p").html("欢迎您访问简明现代魔法图书馆~~");

注意:html()方法可以用于XHTML文档,但不能用于XML文档。

text()方法

此方法类似于JavaScript中的innerText属性,可以用来读取或者没置某个元素中的文本内容。继续使用以上的HTML代码,用text()方法对p元素进行操作:

var p_text = $("p").text(); //获取p元素的文本内容

与html()方法一样,如果需要为某元素设置文本内容,那么也需要传递一个参数。例如对p元素设置文本内容,代码如下:
// 设置p元素的文本内容 
$("p").text("欢迎您访问简明现代魔法图书馆~~");

要注意下面两点:

JavaScript中的innerText属性并不能在Firefox浏览器下运行,而jQuery的text()方法支持所有的浏览器.
text()方法对HTML文档和XML文档都有效。

显示好友列表时,在显示好友名字的<p></p>元素中设置:<p id="p${friend.friendId}"></p>,这样js文件就可以动态获取<p></p>元素的id,并顺利通过text()方法赋值$("#p"+userId).text(name);

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js格式化时间的方法
Dec 18 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
JQuery教学之性能优化
May 14 #Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 #Javascript
javascript 中that的含义示例介绍
May 14 #Javascript
table insertRow、deleteRow定义和用法总结
May 14 #Javascript
jQuery 中国省市两级联动选择附图
May 14 #Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 #Javascript
js实现图片拖动改变顺序附图
May 13 #Javascript
You might like
PHP异常处理浅析
2015/05/12 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python一些性能分析的技巧
2020/08/30 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
优秀村官事迹材料
2014/01/10 职场文书
小学生安全保证书
2014/02/01 职场文书
励志演讲稿范文
2014/04/29 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
辞职信格式范文
2015/05/13 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
联村联户简报
2015/07/21 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
靠谱的活动总结
2019/04/16 职场文书