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>元素的内容,忽略多余空白,试图保留表格格式,针对表格元素,只有只读属性,不具备设置【写】文本内容的属性。

文本内容的读写操作;

 /**
*
* @param element 元素节点
* @param value 写入的文本
* @returns {*}
*/
function textContent(element, value){
var content = element.textContent;
if(value === undefined){//读
if(content !== undefined){//功能检测
return content;
}else{//IE
return element.innerText;
}
}else{//写
if(content !== undefined){
element.textContent = value;
}else{
element.innerText = value;
}
}
}

textContent和innerHtml的更多相关文章

  1. textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别

    今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...

  2. js innerText、textContent、innerHTML的区别和各自用法

    //自定义函数 function my$(id) { return document.getElementById(id); } //点击按钮设置div中的文本内容 my$("btn&quo ...

  3. JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...

  4. [转]被玩坏的innerHTML、innerText、textContent和value属性

    一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...

  5. textContent 与innerText

    转自下面这位大神: http://zhangyaochun.iteye.com/blog/1391370 其实关于这textContent与innerText有很多碎碎的东西,不过个人觉得还是一个不错 ...

  6. vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent

    区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...

  7. 【ToolKit】轻量级JS库

    优点: 丢弃了一些不常用的方法(jQuery.fn):slideUp.fadeIn.animate等: 新增获取子节点的方法(ToolKit.fn):firstChild,lastChild等: 新增 ...

  8. jQuery-1.9.1源码分析系列(十一) DOM操作

    DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...

  9. js中兼容性问题的封装(能力检测)

    所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题. 获得页面文本内容的方式:innnerText 或textConten ...

随机推荐

  1. 配置php中的Oracle扩展

    window 1. 从 OTN Instant Client page下载windows客户端安装包,安装包的位数(32/64位)必须和你所使用的操作系统类型.php版本一致.解压安装包至C:\ins ...

  2. DML

    DML(Data Manipulation Language 数据操控语言),使用insert.update.delete进行数据库的操作.DML一:插入语句 标准的插入语句 insert into ...

  3. SSRS(rdl报表)分页显示表头和冻结表头

    <TablixRowHierarchy>          <TablixMembers>            <TablixMember>            ...

  4. J2EE在Web容器中启动报错:com.sun.jdi.InvocationException occurred invoking method.

    我只是将Hibernate映射文件中的lazy属性有true改为lazy="false",即解决了上述问题.当然我之前也遇到一个问题是不调试时插入数据是不成功的,但是在Debug模 ...

  5. linux查看与设置主机名

    1.设置主机名    通过编辑/etc/sysconfig/network文件中的HOSTNAME字段就可以修改主机名.如下所示:     [root@zijuan /]# vim /etc/sysc ...

  6. Java中Overload和Override的区别

    由于项目正式收工,闲来无事突然发现以前的文档上有一个问题介绍的不是很详细 override(重写,覆盖) ​​ 1.方法名.参数.返回值相同. ​2.子类方法不能缩小父类方法的访问权限. 3.子类方法 ...

  7. outlook 2007如何设置自动转发功能

    "工具" => "规则和通知" => 新建规则 => "邮件到达时检查" => 设置你的条件,比如发件人是谁,主题是 ...

  8. vim-配置文件

    " " Last Change: 2010年08月02日 15时13分 " " Version: 1.80 " "============= ...

  9. Mac设置

    Mac系统的环境变量,加载顺序为: /etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.profile ~/.bashrc

  10. Gdal 1.11.0 添加 Postgresql 9.1 sqlite3 支持

    OS环境Ubuntu12.04 32bit 因为公司一个功能要用到gdal 的ogr2ogr命令转换shp数据,需要能往postgis和sqlite 中插入数据. 用gdal1.11.0的源码默认安装 ...