innerText 与 innerHtml的区别 (一)
innerText 与 innerHtml 都是打印标签之间的文本信息
1、innerText 打印标签之间的纯文本信息,会将标签过滤掉,低版本的火狐浏览器不支持,而是支持textContent
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box"><p>这是P标签</p><p>这是P标签</p><p>这是P标签</p></div>
</body><script>var box = document.getElementById("box");//打印标签之间的纯文本信息,会将标签过滤掉var str = box.innerText; console.log(str);
</script>
</html>
打印结果是
这是P标签这是P标签这是P标签
2、innerHtml 打印标签之间的内容,包括标签和文本信息,各浏览器都支持,但是高版本的浏览器会原样打印
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="box"><p>这是P标签</p><p>这是P标签</p><p>这是P标签</p></div>
</body><script>var box = document.getElementById("box");//打印标签之间的内容,包括标签和文本信息var str = box.innerHTML;console.log(str);
</script>
</html>
打印结果是
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>
如果将div中的p标签不换行,打印的结果会原样输出
<div id="box"><p>这是P标签</p><p>这是P标签</p><p>这是P标签</p>
</div>
打印结果是
<p>这是P标签</p>
<p>这是P标签</p><p>这是P标签</p>
但是使用innerText 会有兼容性,低版本的火狐浏览器不支持使用,而是支持使用textContent,因此我们需要封装一个兼容版本,以及调用方法
<pre class="html" name="code">// 获取标签的对象var box = document.getElementById("box");
// 调用方法var str = getText(box);console.log(str);/*** 封装了一个获取标签之间的文本信息兼容版本函数* @param element 标签对象* @returns {*}*/function getText(element) {if(element.innerText) {return element.innerText; //IE8及之前的浏览器支持,现在两者都支持}else {return element.textContent; //低版本的火狐支持}}
innerText 与 innerHtml的区别 (一)相关推荐
- innerText 和 innerHTML的区别
innerText 和 innerHTML的区别 1.innerText不识别html标签,非标准,会自动去除空格和换行 var div = document.querySelector('div') ...
- Javascript:innertext和innerhtml的区别
文章目录 前言 一.区别 二.代码示例 1.代码演示 2.最终效果 前言 在Javascript中,通过控件对象的innertext和innerhtml属性都可以对控件对象的显示文字进行读取和修改,那 ...
- innerText与innerHTML的区别
innerText: innerText可以获取标签间的内容,如果标签间只有文本的话,则是直接获取.如果标签间还有嵌套标签的话,则会将嵌套标签忽略掉获取文本. innerText在给标签设置内容的时候 ...
- innerText和innerHTML的区别
innerText 不识别htm1标签非标准 去除空格和换行 var div = document . querySelector('div'); div.innerText = '<stron ...
- JS中innerText和innerHTML的区别
innerText主要是设置文本的,甚至标签内容,是没有标签的效果的. innerHTML主要的作用是在标签中设置新的heml标签内容,是有标签效果的 先来看看innerText的效果 <!DO ...
- JavaScript中textContent、innerText和innerHTML的用法以及区别
目录 0.码仙励志 1.textContent的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 2.innerText的用法 1.设置标签中的文本内容 2.获取标签中的文本内容 3.inne ...
- js操作元素:改变元素内容有两种方式: interText 和 innerHTML的区别, 常用的元素的属性操作, 仿电脑系统时间问好 ,表单元素的属性操作 ,案例:仿京东显示隐藏密码 ,样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- innerText和innerHTML改变元素内容
1.innerText: 以点击按钮,div里的文字显示当前时间为例: <button>显示当前系统时间</button> <div>某个时间</div> ...
- innerText和innerHTML区别
innerText和innerHTML区别 尽管DOM带来了动态修改文档的能力,但对开发人员来说,这还不够.IE4.0为所有的元素引入了两个特性,以更方便的进行文档操作,这两个特性是innerText ...
最新文章
- 手动部署OpenStack环境(五:新建网络及部署虚拟机)
- 快速建立自己的个人网站!五款建站程序
- jvm内存收集器总结(图片)
- spring分布式事务示例_Spring声明式事务示例
- 【软件工程】构件化业务模型CBM
- python 第13章:面向对象编程
- [大数据之Spark]——Transformations转换入门经典实例
- mongoDB对没有字段的记录新增字段
- 拒绝版权流氓!阿里巴巴重磅发布免费商用字体
- 机器学习中数据标准化相关方法
- 计算机无法关机 总是自动启动,告诉你win10电脑关机后自动开机怎么解决
- 微软出了一个Python小白神器!
- 家用无线路由器的设置
- c语言.jpg图片转成数组_怎么把Word转成PDF?一个PDF转换软件就能搞定!
- 什么是App推广技术?
- 报表引擎终于做出来了!!!
- IPEndPoint 和 EndPoint
- #编译原理# 概论(一)
- java生成excel并输出到浏览器下载
- 国华小状元1号年金险怎么样?好不好?
热门文章
- JS + HTML + CSS 实现Todolist
- luoguP3397 地毯
- 【问题】【实用】java服务假死【CLOSE_WAIT】【线程WAITING】
- 元数据管理系统的研究与实现
- 网站SEO优化做好能抵几个销售?看看杭州石炭纪怎么用网站来干了销售的活!
- android平台下基于ANativeWindow实现渲染bitmap图像
- 报告解读下载 | 11月《中国数据库行业分析报告》发布,精彩抢先看
- UG/NX二次开发入门手册
- 频率计的交流耦合和直流耦合的区别_示波器DC/AC耦合设置及影响
- 集成旷世人脸检测demo