textContent和innerHtml
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的更多相关文章
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
今天要讲的这些属性都可以用来获取某个元素的内容,你可能会觉得不可思议,或是说上一句"丧心病狂"也.但当你看完以下内容后,会发现除outerText无用外,其他的都有各自的使用场景, ...
- js innerText、textContent、innerHTML的区别和各自用法
//自定义函数 function my$(id) { return document.getElementById(id); } //点击按钮设置div中的文本内容 my$("btn&quo ...
- JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...
- [转]被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?在坑爹的表单元素(如input ...
- textContent 与innerText
转自下面这位大神: http://zhangyaochun.iteye.com/blog/1391370 其实关于这textContent与innerText有很多碎碎的东西,不过个人觉得还是一个不错 ...
- vue-learning:12 - 2 - 区分:outerHTML - innerTHML - outerText - innerText - textContent
区分:outerHTML - innerTHML - outerText - innerText - textContent 获取值 <div id="outer"> ...
- 【ToolKit】轻量级JS库
优点: 丢弃了一些不常用的方法(jQuery.fn):slideUp.fadeIn.animate等: 新增获取子节点的方法(ToolKit.fn):firstChild,lastChild等: 新增 ...
- jQuery-1.9.1源码分析系列(十一) DOM操作
DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...
- js中兼容性问题的封装(能力检测)
所谓兼容性,就是看浏览器是否支持当前对象的属性或是方法,先通过获得页面文本内容的方式来了解兼容性,并封装函数或对象以解决此类问题. 获得页面文本内容的方式:innnerText 或textConten ...
随机推荐
- Magento布局layout.xml文件详解
解析顺序 布局xml文件一般位于app/design/{area}/{package}/{theme}/layout/目录下.Layout文件一般包含block.reference.action三种标 ...
- [置顶] 有关ListIterator接口的add与remove方法探究
ListIterator接口继承自Iterator接口,新增了add()等方法. 关于ListIterator的add()方法的作用(接口是没有方法实现的,但其实现类对于add()方法的实现机制大致相 ...
- uva 10051 Tower of Cubes(DAG最长路)
题目连接:10051 - Tower of Cubes 题目大意:有n个正方体,从序号1~n, 对应的每个立方体的6个面分别有它的颜色(用数字给出),现在想要将立方体堆成塔,并且上面的立方体的序号要小 ...
- java基础之高级应用
在程序中涉及方法重写的地方使用@override Annotation(只作用于方法)注释可以很好的避免由于重写方法名字过长而造成的程序后期出现的难以调试的错误,特别是程序没有报任何的错误时,而程序的 ...
- javascript高级知识分析——灵活的参数
代码信息来自于http://ejohn.org/apps/learn/. 使用数量可变的参数对编程很有好处 function merge(root){ for(i = 0 ; i < argum ...
- Spring整合hibernate4:事务管理[转]
Spring和Hibernate整合后,通过Hibernate API进行数据库操作时发现每次都要opensession,close,beginTransaction,commit,这些都是重复的工作 ...
- shell脚本定时备份数据库
脚本代码: 新建文件back_db.sh #!/bin/bash TODAYTIME="`date +%Y%m%d`" DBNAME="test mysql" ...
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
- Android Shape画圆,矩形
画圆环代码如下: 画圆环,外边的边界宽度大一点即可: <?xml version="1.0" encoding="utf-8"?> <shap ...
- WinCE 5.0模拟器,在 win7 下安装后, VS2008里不显示
来源:http://blog.csdn.net/masterlonely/article/details/8302932 现状: Win7 32位旗舰版 VS2008 Team 在安装了: Windo ...