JQuery系列 | html()和text()方法的用法和区别

Posted 2021-04-08 一只奔跑的前端狗

今天我们来看一个简单的问题，关于JQuery中html()和text()方法的用法与区别。从名字上我们可以猜出大概，html是指html内容，而text是指文本内容，那么下面我们来看看实际情况是什么样的。

通过上面我们可以清楚的看到，html方法输出的p标签内的所有内容，包括html标签；而text方法则是输出的则是p标签内的所有文本，包括p标签中包含的a标签的文本内容。

接下来我修改以上上述代码，我们再来看看效果

通过上面的代码及控制台的输出效果，我们可以发现，html()方法是取得第一个匹配元素的内容，而text()方法是取得所有匹配元素所包含的内容。

知道了html方法和text方法的两个区别之后，我们再来看看如何通过这两个方法设置标签的内容，我们依然来对比着看。

上面是我没有点击按钮执行相应函数之前的效果和控制台的输出效果，下面我再贴出点击函数之后的显示效果和输出效果

上面的结果很明显，利用html()方法修改的html内容中如果含有html标签是可以被浏览器渲染的，而text()方法修改的内容中如果包含html标签在浏览器看来依然是普通的文本内容。

在w3school中对以上两种方法还有一种用法，那就是在方法体中写一个函数，利用函数来控制要修改的内容，下面先看看对该函数的介绍：

语法：

    $(selector).text(function(index,oldcontent))

参数：

    function(index,oldcontent)

    index：可选，接收选择器的index位置

    oldcontent：可选，接收选择器的当前内容

下面是我写的一个小案例：

现在我来把我的些许理解对上述案例进行讲解一下，首先当我点击按钮之后会执行change1函数，而该函数体中有一个text方法，也就是用来修改p标签的文本内容，但是由于text方法中又包含一个内置的匿名函数，而该匿名函数会对$("p")选中的对象进行遍历，在遍历的过程中，如果遍历的对象是第一个，也就是下标为0的时候，会返回一个字符串值，这个值就是我们要修改的内容。下面是这个案例执行后的效果。

好了，今天的介绍就到这里，最后希望各位多多支持我，帮我转发一波。