js中 value&innerHTML&innerText&textContent之间的区别比较

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改元素的文本</title> <style type="text/css"> div{ width:300px; height:300px; float:left; border:1px solid blue; margin-left:50px; } </style> </head> <body> <div><p>i love you</p></div> <div></div> <div></div> <div></div> <div> <p>J 哥最帅</p> <a href="http://www.xxoo.com">xx oo</a> </div> <div></div> <script type="text/javascript"> var divs=document.getElementsByTagName('div'); /* value :应用于表单的输入框---textarea innerHTML：与后两者的区别，可以写入html代码会被解析，并且可以获得html代码 innerText:获得内容的时候，都会忽略html代码 textContent:获得内容的时候，都会忽略html代码 */ //读取内容 console.log(divs[0].innerHTML); console.log(divs[0].innerText); console.log(divs[0].textContent); //写入内容 divs[1].innerHTML='<p>i miss you</p>'; divs[2].innerText='<p>i miss you</p>'; divs[3].textContent='<p>i miss you</p>'; /* 比较innerText和textContent的区别 innerText 获取的内容和html解析的内容一样 textContent获取的内容与源代码的内容一样 */ console.log('%c'+divs[4].innerText,'color:red;'); console.log(divs[4].textContent); var str="<p>哥最帅</p> <a href='http://www.xxoo.com'>xx oo</a>"; // divs[5].innerText=str; // divs[5].textContent=str; </script> </body> </html>

文章发布全站软件文章热门搜索：下载折扣 win8系统影响启动速度资讯首页腾讯视频爱奇艺暴风影音酷狗音乐酷我音乐影音大全软件下载软件教程电脑系统下载聊天工具办公软件杀毒教程系统工具图形图像电脑学习应用软件网络软件苹果应用注册码网站教程技术开发安卓教程其它教程您当前所在位置：网视手游站 -> 网站教程 -> js中 value&innerHTML&innerText&textContent之间的区别比较
js中 value&innerHTML&innerText&textContent之间的区别比较发表时间：2023-09-04 来源：明辉站整理相关软件相关文章人气： [摘要]本篇文章给大家带来的内容是关于js中 value&innerHTML&innerText&textContent之间的区别对比，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、value：应用于表单的输入框（textarea除外）2、innerHTML:... 本篇文章给大家带来的内容是关于js中 value&innerHTML&innerText&textContent之间的区别对比，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 1、value：应用于表单的输入框（textarea除外） 2、innerHTML:可以写入HTML代码，写入的HTML代码可以被解析，获得时候也可以获得HTML代码 3、innerText：获得内容的时候，会忽略HTML代码，写入HTML代码不能解析。获得内容与HTML解析的内容一样 4、textContent：获得内容的时候，会忽略HTML代码，写入HTML代码不能解析。获取的内容与源码内容一样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改元素的文本</title> <style type="text/css"> div{ width:300px; height:300px; float:left; border:1px solid blue; margin-left:50px; } </style> </head> <body> <div><p>i love you</p></div> <div></div> <div></div> <div></div> <div> <p>J 哥最帅</p> <a href="http://www.xxoo.com">xx oo</a> </div> <div></div> <script type="text/javascript"> var divs=document.getElementsByTagName('div'); /* value :应用于表单的输入框---textarea innerHTML：与后两者的区别，可以写入html代码会被解析，并且可以获得html代码 innerText:获得内容的时候，都会忽略html代码 textContent:获得内容的时候，都会忽略html代码 / //读取内容 console.log(divs[0].innerHTML); console.log(divs[0].innerText); console.log(divs[0].textContent); //写入内容 divs[1].innerHTML='<p>i miss you</p>'; divs[2].innerText='<p>i miss you</p>'; divs[3].textContent='<p>i miss you</p>'; / 比较innerText和textContent的区别 innerText 获取的内容和html解析的内容一样 textContent获取的内容与源代码的内容一样 / console.log('%c'+divs[4].innerText,'color:red;'); console.log(divs[4].textContent); var str="<p>哥最帅</p> <a href='http://www.xxoo.com'>xx oo</a>"; // divs[5].innerText=str; // divs[5].textContent=str; </script> </body> </html> 相关推荐： js如何判断浏览器是pc端还是移动端？（两种方法） js闭包中this指向的解决方法（代码）以上就是js中 value&innerHTML&innerText&textContent之间的区别对比的详细内容，更多请关注php中文网其它相关文章！微信分享网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。标签：js中 value&innerHTML&innerText&textContent之间的区别比较* 上一篇：html中自定义菜单随着滚动条滑动的代码完成下一篇：对于html big标签的作用与具体的用法详细说明(内有代码案例)	推荐资讯总人气榜 1PS提示：因为图层已锁定，无法编辑图层的处理方法 2picacg苹果版怎么找不到\|picacg ios版是不是下架了介绍 3Adobe Illustrator CS5 序列号大全 4ACDsee注册码免费分享（含ACDsee18、ACDsee10等版本） 5PDF浏览器能看3D文件吗？PDF浏览器看3D文件图文详细教程 6Potato(马铃薯聊天)怎么注册不了\|Potato不能注册处理方法介绍 7Potato(土豆聊天)怎么换头像\|Potato app更改头像方法介绍 8最新的Adobe Illustrator CS4序列号大全 9Intel i7-9700K性能跑分曝光：同代提升约12% 10qq邮件是否已读怎么看 QQ邮箱已经发出去的邮件怎么知道对方是否已经查看 11AMD推土机架构回顾：虽陨落却是Zen成功的垫脚石 12XP系统怎么清除缓存？ 1GG广告申请 2提高谷歌联盟Adsense收入4种方法 32014年9月百度绿萝算法再度升级 4百度减少收录是什么原因？ 5百度降权并不可怕 6新手误区：揭露seo反链工具的真实面目 7浅谈增加网站外部链接的方法 8被降权问题浅谈百度页面权重 9360搜索结果现”本地”标签披露未来搜索优化趋势 10百度谷歌等大型网站收录页面提交入口地址 11恢复百度权重的一些心得 12SEO优化必须控制个度最新教程本月人气 1多组爱奇艺vip会员账号共享（2017.3.7） 2最新8组芒果tv会员账号共享 32017.03.07最新腾讯视频会员账号共享 4最新芒果tv会员账号共享（2017.3.6） 54组最新腾讯视频会员共享(2017.03.06) 6QQ音乐播放音乐断断续续如何办？ 7百度影音播放器没声音如何办？ 8天天动听PC版下载的歌曲在什么地方里?天天动听下载歌曲在什么地方一个文件夹？ 9最新腾讯视频会员账号共享（2017.3.3） 10qq影音如何循环播放某一段视频？ 11QQ影音如何关联本地字幕？QQ影音关联本地字幕方法 12qq影音如何旋转视频？qq影音旋转视频方法 1支付宝不能交水电费了吗支付宝为什么不能交水电费了 2企业微信怎么登陆微信企业版账号登录方法流程 3人人车怎么收费人人车收费规范 43星版iphone6s与台积电版iphone6s续航哪一个好 5眼萌app怎么色弱测试眼萌app色弱测试图文说明教程 6美团支付是什么美团支付怎么用 7华为pay与微信支付哪一个好微信支付与huawei pay比较区别 8微信扫描二维码没反应怎么办？微信扫描二维码不能下载处理方法 9美图看看“穿透文件夹”技巧一键直达深层图片 10小猿搜题与作业帮哪一个好作业帮与小猿搜题比较评测 11国美美易分贷款能做几次美易分贷款申请次数介绍 12平板电脑wifi无线网络设置图文说明教程【图文详细说明】
相关文章 html表格的语法与相关属性的说明(附代码) html中表单标签的type属性的应用案例 html em标签的作用是什么？<em>与<i>标签的区别 html strong标签是什么意思？html中strong标签的具体用法说明 html button标签是什么意思？html button标签的使用细节 html address标签如何用？html address标签的使用方法详细说明 html abbr标签是什么意思？html abbr标签的具体用法详细说明 html body标签的居中属性你知道吗？html body标签的定义与使用方法 html的meta标签有什么用？html中meta标签属性的相关用法 html bdo标签是什么意思?html bdo的使用方法详细说明 html link标签有什么作用？html link标签的定义及属性说明 html colspan属性的定义是什么？html colspan属性的使用方法说明

js中 value&innerHTML&innerText&textContent之间的区别比较

推荐资讯 总人气榜

最新教程 本月人气

相关文章

推荐资讯总人气榜

最新教程本月人气