innerHTML、innerText和outerHTML的区别

来源：互联网发布：windows字体安装包编辑：程序博客网时间：2024/05/16 19:08

在JavaScript里，innerHTML和innerText的主要区别是innerHTML能够把作用元素内的所有内容包括标签都能输出来，而innerText只能输出文本内容，不能输出标签。举个例子，下面的这个例子div标签下有一个文本，这两个方法都能输出haha，但是如果div标签里多一个p标签的话，那么会体现出他们的不同：

<body><div id='div'>haha</div></body><script type="text/javascript">var a = document.getElementById('div')        console.log(a.innerHTML)console.log(a.innerText)</script>

<body><div id='div'><p>haha</p></div></body><script type="text/javascript">var a = document.getElementById('div')console.log(a.innerHTML)console.log(a.innerText)</script>

这个innerHTML是W3C标准，而innerText它只是IE的标准，不够现在越来越多的浏览器支持innerText。既然有inner，肯定有outer，在JavaScript有一个outerHTML，这个东西输出的内容在innerHTML的基础上还增加了输出对象标签本身以及里面的缩进。举个例子就来分清楚outerHTML和innerHTML的区别：

<body><div id='div'><p>haha</p></div></body><script type="text/javascript">var a = document.getElementById('div')console.log(a.innerHTML)console.log(a.outerHTML)</script>

<body><div id='div'><p>haha</p></div></body><script type="text/javascript">var a = document.getElementById('div')console.log(a.innerHTML)console.log(a.outerHTML)</script>

上面这两个代码差不多一样，只是在div内一个有缩进另一个没有，所以输出的结果也是不同的。

阅读全文

0 0