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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
javascript中 try catch用法
Aug 16 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
java必学必会之static关键字
Dec 03 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 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&&mysql)五
2006/10/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
python的else子句使用指南
2016/02/27 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
个人找工作的自我评价
2013/10/17 职场文书
青年文明号申报材料
2014/12/23 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
详解MySQL中的主键与事务
2021/05/27 MySQL
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技