DOM中的outerHTML,innerHTML,outerText,innerText的区别
区别 dom innerHTML
2023-09-11 14:17:02 时间
--转自http://blog.163.com/yw_0721/blog/static/7164579720102932157759/
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于:
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://jhxk.javaeye.com/blog/353309
代码练习:(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="Submit" value="outerHTML" onClick="getouterHTML()"> <input type="button" name="Submit2" value="innerHTML" onClick="getinnerText() "> <input type="button" name="Submit2" value="innerHTML" onClick="getouterText()"> </p>
相关文章
- showdialog()与show的区别
- 上层建筑——DOM元素的特性与属性(dojo/dom-prop)
- Atitit 常见概念与技术 dom及其解析 目录 1.1. Dom概念(文档对象模型(Document Object Model))是什么1 1.1.1. 节点2 1.1.2. Node 层次
- Atitit.远程文件技术 webdav ftp scp ssh-sftp http nfs smb 的区别与总结
- Cloud Connector的普通版本和Portable版本的区别
- myisam和innodb的区别
- 硬链接与软链接的区别有哪些?
- Django模型中OneToOneField和ForeignKey的区别
- C/C++枚举和宏的区别
- RTMP/RSTP/HTTP区别
- 钽电容 Case B 和 MLCC 1210 区别
- 自动化设备测试与自动化测试的区别
- java 2和java有什么区别
- 【深度学习】Pytorch面试题:什么是 PyTorch?PyTorch 的基本要素是什么?Conv1d、Conv2d 和 Conv3d 有什么区别?
- 执行count(1)、count(*) 与 count(列名) 到底有什么区别?