从零开始前端学习[46]:在标签中添加内容,关于innerHTML和innerText的一点解析
2017-11-08 21:50
597 查看
从零开始前端学习[46]:在标签中添加内容,关于innerHTML和innerText的一点解析
innerHTMLinnerText
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
其实在前面的简单的js的使用过程中,已经使用了innerHTML来修改页面中的内容,但是js又为我们提供了一个所谓的innerText,显而易见,这个后缀是HTML超文本,一个是Text文本,那里面有什么区别呢??
直接看代码对比:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--> <meta name="Generator" content="EditPlus®"> <!--编辑器的名称--> <meta name="Author" content="作者是谁"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述和简介"> <style type="text/css"> body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;} ul,ol{margin: 0; list-style: none; padding: 0;} a{ text-decoration: none; } *{ margin: 0; padding: 0; } .fl_l{float: left} .clearfix:after{clear: both;content: "";display: block} .main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink} p{width: 200px;height: 200px;box-shadow: 0 0 10px 0 blue;margin: 10px} </style> </head> <body> <div class="main"> <div class="compare1 clearfix" > <p class="fl_l" id="innerHTML_1">innerHTML_1</p> <p class="fl_l" id="innerText_1">innerText_1</p> </div> <div class="compare2 clearfix"> <p class="fl_l" id="innerHTML_2">innerHTML_2</p> <p class="fl_l" id="innerText_2">innerText_2</p> </div> </div> <script> var innerHTML_1 = document.getElementById("innerHTML_1"); var innerText_1 = document.getElementById("innerText_1"); var innerHTML_2 = document.getElementById("innerHTML_2"); var innerText_2 = document.getElementById("innerText_2"); innerHTML_1.onmouseover = function () { this.innerHTML = "innerHTML_1 function"; } innerText_1.onmouseover = function () { this.innerText = "innerText_1 function"; } innerHTML_2.onmouseover =function () { this.innerHTML = "<span style='color: red'>innerHTML_2 function<span>"; } innerText_2.onmouseover = function () { this.innerText = "<span style='color: red'>innerHTML_2 function<p>"; } </script> </body> </html>
显示:
从上面可以看到,如果从纯文本的角度来理解的话,innerHTML和innerText都是一样的,因为在添加字符串这样数据的时候,是没有任何区别的,
但是如果从标签的角度来进行加载的话,innerHTML是可以去进行标签的解析的,也就是可以动态的再去加载标签,但是innerText确是以文本的形式进行显示的
这也就是它们主要的区别,虽然都是可以在标签中添加内容,但是不同的应用场景下,使用的标签页也是需要不同的
相关文章推荐
- 从零开始前端学习[5]:关于html5默认标签样式的介绍以及定义清除
- 关于asp.net mvc 使用ueditor添加内容 前端只显示原样标签的问题
- 从零开始前端学习[2]:img标签的使用
- 使用dom4j解析xml标签,将标签属性与文本内容添加进集合
- js通过innerHTML向div中追加标签,添加后之前输入的内容都清空了解决方法
- 从零开始前端学习[26]:html5的一些常用标签,header,footer,section,aside,figure,figcaption,nav,artical,
- 从零开始前端学习[20]:前端与后台可能需要使用交互的表单form,input标签
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
- 从零开始前端学习[4]:关于html5文本文件的一些简单介绍
- 从零开始前端学习[42]:关于浮动元素在窗口缩小情况下,布局下沉的深思
- Android学习札记10:用SAX解析XML文件时,当标签中出现换行符时可能出现读取内容为空的解决方法
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
- 从零开始前端学习[27]:html5中的特殊结构标签,ruby,mark,meter,progress,details
- 从零开始前端学习[50]:js操作标签属性,读写属性标签
- 糊糊的前端学习笔记——a标签点击跳转页面后,为被点击的a标签添加样式【Day1】
- 从零开始前端学习[1]:认识常用的标签
- 前端学习——关于语义化标签的一些思考
- 从零开始前端学习[23]:img标签的属性和水平对齐的属性vertical-align
- 从零开始前端学习[6]:关于html5的元素类型转换,行级元素,块级元素,行块级元素类型
- web前端之html从零开始(二)----a标签学习,强化