innerHTML、innerText和textContent之间的区别

最新推荐文章于 2023-12-15 23:14:09 发布

原创最新推荐文章于 2023-12-15 23:14:09 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

本文详细解析了HTML中innerHTML、innerText与textContent属性的区别，包括它们如何处理标签内的内容及文本，以及在不同浏览器中的兼容性问题。并提供了一种解决innerText与textContent兼容性的方法。

1.innerHTML和innerText之间的区别

首先我在body标签中创建一个div子标签

<div id="box">
        innerHTML和innerText之间的区别
        <span>span标签</span>
</div>

然后我们在script标签中获取div元素，同时把div元素的属性在控制台打印出来

var box = document.getElementById('box');
console.dir(box);

我们可以在控制台找到innerHTML和innerText两个属性，它们的主要区别在哪呢？下面看代码

console.log(box.innerText);
console.log(box.innerHTML);

可以看见控制台的打印效果
在这里插入图片描述
从控制台的打印效果可以看出innerHTML原封不动的把div元素里面的内容呈现出来包括所有的空白，标签；而innerText只呈现标签中的文本内容。

2.innerText和textContent之间的区别

innerText和textContent的实现效果一样，只呈现文本内容。但是需要注意的地方在于innerText和textContent具有浏览器兼容问题，经过测试发现不同浏览器对它们的支持不一致

浏览器	版本	innerHTML	textContent
Chrome		支持	支持
Firefox	新版	支持	支持
Firefox	旧版	不支持	支持
IE	IE9及以上	支持	支持
IE	IE9以下	支持	不支持

3.解决innerText和textContent的浏览器兼容问题

直接上代码

var box = document.getElementById('box');
        console.log(getInnerHTML(box));
        function getInnerHTML(element) {
        	/*
                typeof用来检测属性的类型:
                通过console.log(typeof box.innerText);检测
                若浏览器支持innerText属性则检测出来innerText的类型为String
            */
            if (typeof element.innerText === 'String') return element.innerText;
            else return element.textContent;
        }