DOM中的outerHTML,innerHTML,outerText,innerText的区别
2016-02-27 22:41
579 查看
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:
特别说明:
innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
转自:http://blog.163.com/yw_0721/blog/static/7164579720102932157759/
代码练习:(ie生效,ff中只有innerHTML是对的)
1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。
特别说明:
innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
转自:http://blog.163.com/yw_0721/blog/static/7164579720102932157759/
代码练习:(ie生效,ff中只有innerHTML是对的)
<script type="text/javascript"> function getinnerHTML() { var e=window.document.getElementById("testdiv"); alert(e.innerHTML); //<p>白云</p> } function getouterHTML() { var e=window.document.getElementById("testdiv"); alert(e.outerHTML); //<div id="testdiv"><p>白云</p></div> } function getinnerText() { var e=window.document.getElementById("testdiv"); alert(e.innerText); //白云 } function getouterText() { var e=window.document.getElementById("testdiv"); alert(e.outerText); //白云 } </script> <div id="testdiv"><p>白云</p></div> <p> <input type="button" name="Submit2" value="innerHTML" onClick="getinnerHTML()"> <input type="button" name="Submit2" value="outerHTML" onClick="getouterHTML()"> <input type="button" name="Submit2" value="innerHTML" onClick="getinnerText()"> <input type="button" name="Submit2" value="innerHTML" onClick="getouterText()"> </p>
相关文章推荐
- 将图片的二进制字节 在HTML页面中显示
- HTML开发指南
- 第一天:代码入门、HTML语法基础及文档类标签
- what does Html.HiddenFor () for ?
- day03—html之页面布局
- MVC4 @RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别
- html-label标签
- 简单的经典html进度条
- 如何使html页面变灰色
- HTML Meta标签
- html-frame框架
- html网页切换和framset布局
- html之checkbox------checkbox只是input框的type属性
- html开发随笔二
- html开发随笔一
- html下拉框之间的联动------一级分类和二级分类
- HTML day02(html列表与菜单的制作)
- html模块一些方法
- Html 链接、图像、表格、表单、背景
- HTML 5 Web 存储——localStorage