innerHML、innerText、textContent 获取和设置内容总结

1.获取内容：

innerText：获取的是纯文本，不带标签，也就是说，当获取到的内容里面包含标签时，会自动忽略掉标签，值获取标签的文本内容；

结果为：

innerHTML：获取的内容带标签，严格来说，他才是真正的获取双标签里所有的内容，包括标签，也就是说，不解析标签，把标签显示出来；

结果为：

2.设置内容：

innerText：设置的时候带标签，也会把比起爱你当纯文本，不会解析标签；

结果为：

innerHTML：设置的时候若带有标签，会把标签解析出来；

结果为：

总结：

1.innerHTML比innerText功能强大；

2.innerText是IE以前搞出来的属性，所以不属于标准属性；火狐45版本和之前的浏览器不支持；

3.innerHTML在所有浏览器中都得到支持。

4.textContent与innerText的功能做用是一样的，并且textContent在IE8和之前的老版本浏览器不支持。

 

最后再来说一下innerHTML的影响：

1、如果在大量的循环里用innerHTML添加子元素，会非常的好资源，导致浏览器非常卡顿，innerHTML用 +=的方式添加子元素，其实本质是重新赋值，重新赋值就意味着每次都要先删掉原来的内容，再重新一个个的添加渲染。这就是好资源的原因所在。

2.  此外，innerHTML添加的新的子元素的时候，会让原本的元素丢失事件。原因是：它把之前的元素删掉，再重新添加，但并没有给新添加的元素追加事件，因此导致事件丢失。

 

小魔女学识浅薄，若有错误，欢迎大佬纠正。不胜感激。