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

更新时间：2014年06月20日 00:33:42 作者：简明现代魔法

使用JQuery可以非常容易地添加、获取和改变某个HTML元素的内容，你会为这种简便感到非常愉悦

先来看看演示效果：

欢迎访问脚本之家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文档都有效。

您可能感兴趣的文章:

jQuery实现动态给table赋值的方法示例
这篇文章主要介绍了jQuery实现动态给table赋值的方法,结合具体实例形式分析了jQuery动态操作table表格节点的相关技巧,需要的朋友可以参考下
2017-07-07
webpack写jquery插件的环境配置
本篇文章给大家讲述了用webpack开发jquery插件需要的环境以及配置讲解，有需要的读者们参考下吧。
2017-12-12
用队列模拟jquery的动画算法实例
这篇文章主要介绍了用队列模拟jquery的动画算法,实例分析了用队列模拟jquery的动画算法的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
jQuery回到顶部的代码
在一些网站上，我们经常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果，非常不错，感兴趣的朋友可以参考下
2016-07-07
jquery实现带二级菜单的导航示例
这篇文章主要介绍了jquery实现带二级菜单的导航示例,需要的朋友可以参考下
2014-04-04
jQuery网页定位导航特效实现方法
这篇文章主要介绍了jQuery网页定位导航特效实现方法,结合实例形式分析了jQuery网页定位导航的功能描述、原理与核心实现代码,需要的朋友可以参考下
2016-12-12
jQuery实现鼠标经过图片预览大图效果
我们可以借助jQuery来实现一些很酷炫的效果，本篇为大家介绍下通过jQuery实现当鼠标经过了图片数，图片会放大进行预览大图,需要的朋友可以参考下
2014-04-04
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionWidgets实现的Cylinder图效果,结合实例形式分析了jQuery使用FusionWidgets结合swf文件读取xml数据并采用Cylinder图展示的相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
jQuery.trim() 函数及trim()用法详解
jQuery.trim()函数用于去除字符串两端的空白字符。jquery trim函数应用非常广泛，下面小编给大家讲解jquery.trim（）函数及trim()用法详解，需要的朋友可以参考下
2015-10-10
JQuery.validationEngine表单验证插件(推荐)
这篇文章主要介绍了JQuery.validationEngine表单验证插件(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12

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

html()方法

text()方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具