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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
微信小程序实现留言功能
Oct 31 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
linux面试题参考答案(11)
2012/05/01 面试题
设计模式的基本要素是什么
2014/04/21 面试题
中职生自荐信
2013/10/13 职场文书
伊琍体标语
2014/06/25 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
Python作用域和名称空间的详细介绍
2022/04/13 Python
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技