JS中innerHTML、outerHTML、innerText、outerText的用法与区别

1、功能说明:

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

innerText 设置或获取位于对象起始和结束标签内的文本

outerHTML 设置或获取对象及其内容的HTML形式

outerText 设置(包括标签)或获取(不包括标签)对象的文本

2、示例

页面有如下代码：

<div id="mydiv"><span style="color:red">span1</span> span2
</div>

var innerHTML = document.getElementById("mydiv").innerHTML;
var innerText = document.getElementById("mydiv").innerText; //Firefox不支持
var outerHTML = document.getElementById("mydiv").outerHTML;
var outerText = document.getElementById("mydiv").outerText; //Firefox不支持
console.info(innerHTML);  //输出<span style="color:red">span1</span> span2
console.info(innerText);  //输出span1 span2
console.info(outerHTML);  //输出<div id="mydiv"><span style="color:red">span1</span>span2</div>
console.info(outerText);  //输出span1 span2

PS: innerHTML是符合W3C标准的属性，而innerText对Firefox是不支持的，因此，尽可能地去使用innerHTML，

而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，

再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

console.info(document.getElementById('mydiv').innerHTML.replace(/<.+?>/gim,''));

查看演示：http://itmyhome.com/js_innerHTML_innerText_differences/

作者：itmyhome

JS中innerHTML、outerHTML、innerText、outerText的用法与区别相关推荐

js中innerHTML和innerText jQuery中html()和text()的区别
js中innerHTML和innerText的区别 innerHTML innerHTML 会将标签和标签中的内容否获取回来 innerHTML .innerHTML = '<p>&l ...
html页面的text用法,js中innerHTML，innerText，outerHTML用法总结
如何获取DIV里面的内容,在js中为大家提供了三种方法,分别是outerHTML.innerHTML和innerText,这里要注意大小写!看起来长得很像,那么到底怎么使用以及它们之间有什么区别,我想 ...
js中innerHTML与innerText的用法与区别【转自http://blog.sina.com.cn/johnpu】
用法:SupeSite/X-Space官方站%x-ZP$k?'DWZ_{ SupeSite/X-Space官方站K?_/T9s3^QJ a4X <div id="test"& ...
innerHTML连接指定HTML文件,js中innerhtml的用法
js中innerHTML与innerText的用法与区别 js中innerHTML的用法: innerHTML可获取或设置指定元素标签内的 html内容,从该元素标签的起始位置到终止位置的全部内容(包 ...
JavaScript中innerHTML、outerHTML、innerText、outerText的用法与区别认识
2017百度前端技术学院(js任务一) 一.JS中innerHTML.outerHTML.innerText.outerText.value的区别与联系? 在JS中很容易将以上几者记错弄混,在网上找了 ...
JS中innerHTML,innerText,outHTML的用法及区别
一张图解释: 对于一个id为"testdiv"的div来说,outerHTML.innerHTML以及innerTEXT三者的区别可以通过下图展示出来: 文字解释: innerHT ...
JS DOM innerHTML和innerText
JS DOM innerHTML和innerText 在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的"内部元素",也可以使用innerTe ...
JS中 new Date() 各方法的用法
JS中 new Date() 各方法的用法 1.new Date() 参数篇 a.返回类型为国标时间, b.无参数时可以直接返回输出时的时间, c.有参数时则返回对应时间的国标时间, d.日期中间的符 ...
JS DOM innerHTML outerHTML - Kaiqisan
JS DOM innerHTML outerHTML ヤッハロー.Kaiqisanすうう.一つふつうの学生プログラマである,今天没有开场白,直接进入主题. 这个还是很好理解的innerHTML获取或设 ...

JS中innerHTML、outerHTML、innerText、outerText的用法与区别

JS中innerHTML、outerHTML、innerText、outerText的用法与区别相关推荐

最新文章

热门文章