jquery的元素的文本内容与HTML内容操作的区别

布满荆棘的人生 2022-05-12 00:38 240阅读 0赞

**一 应用**

获取和设置元素的文本内容与HTML内容

**二 代码**

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
    应用text()方法设置的内容
    <div id="div1">
    	<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
    </div>
    <br />应用html()方法设置的内容
    <div id="div2">
    	<span id="clock">当前时间：2011-07-06 星期三 13:20:10</span>
    </div>
    <script type="text/javascript">
       $(document).ready(function(){
                $("#div1").text("<span style='color:#FF0000'>我是通过text()方法设置的HTML内容</span>");
                $("#div2").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");
                alert("通过text()方法获取：\r\n"+$("div").text()+"\r\n通过html()方法获取：\r\n"+$("div").html());
       });
    </script>

**三 运行效果**

![5061c7d2-e8e2-379c-8c30-ba4428ed999b.png][]

四 运行分析

1、在应用 text() 设置文本内容时，即使内容中包含 HTML 代码，也将被认为是普通文本，并不能作为 HTML 代码被浏览器解析，而应用 html() 设置的 HTML 内容中包括的 HTML 代码就可以被浏览器解析。

2、 应用 text() 方法获取文本内容时，将获取全部匹配元素中包含的文本内容，而应用 html() 方法获取 HTML 内容时，则只获取第一个匹配元素中包含的 HTML 内容。

[5061c7d2-e8e2-379c-8c30-ba4428ed999b.png]: /images/20220512/7da7ec7370b944ac9e96b130deebf86d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery内容文本值及元素操作

一、jQuery内容文本值主要针对元素的内容还有表单的值操作 1. 普通元素的内容html() > 相当于原生innerHTML 语法： html()

- 日理万妓/ 2023年07月04日 11:23/ 0 赞/ 37 阅读

相关 06 jquery 获取元素的内容-html()-val()-text()

获取元素的内容作者：曾庆林 html()方法 `Html()`:获取匹配元素集合中第一个元素的HTML内容 `html(htmlstring)` 设置匹配元素

浅浅的花香味﹌/ 2022年12月08日 12:50/ 0 赞/ 185 阅读

相关 HTML文档内容与＜script＞元素内容的加载顺序

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 基本理论 2. 内部JS代码与外部JS代码 3. 多个\` 1.

不念不忘少年蓝@/ 2022年10月10日 11:10/ 0 赞/ 212 阅读

相关 jquery的元素的文本内容与HTML内容操作的区别

一应用获取和设置元素的文本内容与HTML内容二代码 <script language="javascript" src="JS/jquery-3.1.1.

布满荆棘的人生/ 2022年05月12日 00:38/ 0 赞/ 241 阅读

相关 jQuery对元素内容操作

jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。元素的内容是指定义元

墨蓝/ 2022年05月12日 00:38/ 0 赞/ 362 阅读

相关 jQuery-HTML内容查询与设置

获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内

爱被打了一巴掌/ 2022年04月16日 00:09/ 0 赞/ 222 阅读

相关 jQuery更改元素内容

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年01月20日 10:53/ 0 赞/ 324 阅读

相关用jquery如何获取select元素中当前选择的文本内容

1.简单说 var tt=$("form select[name=selectName]").find('option:selected').text();

谁借莪１个温暖的怀抱￠/ 2021年11月23日 16:38/ 0 赞/ 598 阅读

相关基于html的Dom操作如何获取元素【及所有子元素的文本内容】总结【textContent、innerText、innerHTML】区别

基于html的Dom操作如何获取元素【及所有子元素的文本内容】总结【textContent、innerText、innerHTML】区别参考文档：textConten

超、凢脫俗/ 2021年09月03日 05:40/ 0 赞/ 488 阅读

相关 jQuery--内容操作（html()、text()、val()）详解

样式操作在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数

灰太狼/ 2021年08月13日 22:35/ 0 赞/ 395 阅读