JQuery获取与设置HTML元素的内容或文本的实现代码


Posted in Javascript onJune 20, 2014

先来看看演示效果:

欢迎访问三水点靠木PHP教程

  • 三水点靠木PHP教程
  • 简单易懂的JavaScript魔法
  • 简单易懂的JQuery魔法

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("欢迎您访问三水点靠木教程~~");

要注意下面两点:

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

Javascript 相关文章推荐
Javascript中设置默认参数值示例
Sep 11 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 #Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 #Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 #Javascript
对之前写的jquery分页做下升级
Jun 19 #Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 #Javascript
jQuery常用操作方法及常用函数总结
Jun 19 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
WordPress中"无法将上传的文件移动至"错误的解决方法
2015/07/01 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python下10个简单实例代码
2017/11/15 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
个人银行贷款担保书
2014/04/01 职场文书
小学生植树节活动总结
2014/07/04 职场文书
学校运动会感想
2015/08/10 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript