博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Js—innerHTML和innerText的区别
阅读量:5279 次
发布时间:2019-06-14

本文共 996 字,大约阅读时间需要 3 分钟。

1.innerHTML属性和innerText属性

  都是对元素的一个操作,简单讲,innerHTML可以在某种特定环境下重构某个元素节点的DOM结构,innerText只能修改文本值

 

  在JavaScript高级程序设计(第三版)是这样描述的: 

    在只读模式下,innerHTML返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。

    

  这是一个div标签   
这里又是一个div标签
var div = document.getElementsTagName("div")[0];console.log(div.innerHTML); // 这是一个div标签
这里又是一个div标签
console.log(div.innerText);   //这是一个div标签 //这里又是一个div标签

    结果显而易见,innerHTML会返回一个带标签的值,innerText只会返回文本值,如果有换行,也会返回换行。

 

    在写入模式下,innerHTML会根据指定的值创建新的DOM树,替换掉调用元素的所有子节点。

  这是一个div标签  
这里又是一个div标签
var div = document.getElmentsByTagName('div')[0];div.innerHTML = "我是一个链接";div.innerText= "我是一个链接";//设置innerHTML后div结构变成
//设置innerText后div结构变成
这是的a只是纯文本,在页面上只是文字,并没有渲染成a元素

  

  技巧分享: 当需要添加的innerHTML为DOM结构另一个元素的文本内容时,可以使用下面的操作

 

this.innerHTML = documen.body.innerHTML.replace(/<.+?>/gim,'');//去掉标签

 

转载于:https://www.cnblogs.com/learnRoad/p/10645704.html

你可能感兴趣的文章
第六章 字节码执行方式--解释执行和JIT
查看>>
字符串方法title()、istitle()
查看>>
yield语句
查看>>
查看linux系统中占用cpu最高的语句
查看>>
[洛谷P1738]洛谷的文件夹
查看>>
ubuntu server设置时区和更新时间
查看>>
【京东咚咚架构演进】-- 好文收藏
查看>>
【HTML】网页中如何让DIV在网页滚动到特定位置时出现
查看>>
文件序列化
查看>>
jQuery之end()和pushStack()
查看>>
Bootstrap--响应式导航条布局
查看>>
Learning Python 009 dict(字典)和 set
查看>>
JavaScript中随着鼠标拖拽而移动的块
查看>>
HDU 1021 一道水题
查看>>
The operation couldn’t be completed. (LaunchServicesError error 0.)
查看>>
php每天一题:strlen()与mb_strlen()的作用分别是什么
查看>>
工作中收集JSCRIPT代码之(下拉框篇)
查看>>
《转载》POI导出excel日期格式
查看>>
code异常处理
查看>>
git - 搭建最简单的git server
查看>>