textContent和innerHtml

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

转载最新推荐文章于 2023-12-15 23:14:09 发布 · 174 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lee90/p/5715838.html

本文详细对比了textContent与innerText两个属性的区别和支持情况。textContent是标准属性，被大多数浏览器支持，而innerText除了Firefox外被广泛支持。文章还介绍了如何使用这两种属性进行文本内容的读写操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

textContent,innerText, 查询或者设置元素的文本内容。

textContent如，html：

<p>test gogo</p>

javascript中：

var p0 = document.getElementsByTagName("p")[0];
//查询文本内容
    var txt = p0.textContent;
//设置文本内容
    p0.textContent = "hello world!";

说说两者的支持者。

textContent属性【标准】，除了IE的所有浏览器都支持，innerText除了Firefox的所有浏览器属性都支持，而在IE中，用innerText代替textContent属性。

注意，两者的不同点：textContent属性将指定的元素的所有后代text节点串联在一起。innerText指定不明确，且不返回<script>元素的内容，忽略多余空白，试图保留表格格式，针对表格元素，只有只读属性，不具备设置【写】文本内容的属性。

文本内容的读写操作；

 1 /**
 2  * 
 3  * @param element  元素节点
 4  * @param value    写入的文本
 5  * @returns {*}
 6  */
 7 function textContent(element, value){
 8     var content = element.textContent;
 9     if(value === undefined){//读
10         if(content !== undefined){//功能检测
11             return content;
12         }else{//IE
13             return element.innerText;
14         }
15     }else{//写
16         if(content !== undefined){
17             element.textContent = value;
18         }else{
19             element.innerText = value;
20         }
21     }
22 }