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

textContent如,html:

  1. <p>test gogo</p>

javascript中:

  1. var p0 = document.getElementsByTagName("p")[0];
  2. //查询文本内容
  3. var txt = p0.textContent;
  4. //设置文本内容
  5. 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. }

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. Dreamweaver PHP代码护眼配色方案

    结果展示 [1]主菜单选择编辑->首选项.在分类中选择"字体".设置代码视图的字体为Courier New [2]在分类中选择 "代码颜色",点击 &qu ...

  2. mongodb创建、更新、删除

    1.插入操作 user = {"username":"lcq","sex":"man"} db.user.insert( ...

  3. 不错的JS

    http://www.17sucai.com/preview/47509/2013-10-18/Sequence-master/photo-stack/index.html

  4. SQL Server执行计划那些事儿(3)——书签查找

    接下来的文章是记录自己曾经的盲点,同时也透漏了自己的发展历程(可能发展也算不上,只能说是瞎混).当然,一些盲点也在工作和探究过程中慢慢有些眉目,现在也愿意发扬博客园的奉献精神,拿出来和大家分享一下. ...

  5. java 线程之间通信以及notify与notifyAll区别。

    jvm多个线程间的通信是通过 线程的锁.条件语句.以及wait().notify()/notifyAll组成. 下面来实现一个启用多个线程来循环的输出两个不同的语句. package com.app. ...

  6. Windows中的对象

    来源  http://www.0xaa55.com/forum.php?mod=viewthread&tid=1401&extra=page%3D1  windows里常用句柄操作资源 ...

  7. MIT6.828 JOS系统 lab2

    MIT6.828 LAB2:http://pdos.csail.mit.edu/6.828/2014/labs/lab2/ LAB2里面主要讲的是系统的分页过程,还有就是简单的虚拟地址到物理地址的过程 ...

  8. python 文件夹比较

    参考:http://blog.csdn.net/imzoer/article/details/8675078 文件比较:filecmp模块:filecmp '''Created on 2014-6-6 ...

  9. jQuery1.9.1针对checkbox的调整

    在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态: $('#che ...

  10. html语法之--使用图像映射

    1 什么是图像映射所谓图像映射是指在一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同的区域时便可以跳转到相应的目标页面. 2 创建图像映射 2.1 定义映射区域 定义映射区域使用MA ...