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 ...
随机推荐
- Minimum Transport Cost(floyd+二维数组记录路径)
Minimum Transport Cost Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...
- JQuery日记6.9 Promise/A之Callbacks
JQuery并没有简单的使用一个Array来存储回调函数,而是通过JQuery.Callbacks(options)返回一个self对象,此对象能够动态的add,remove和fire回调函数队列.此 ...
- [转载]解析WINDOWS中的DLL文件---经典DLL解读
[转载]解析WINDOWS中的DLL文件---经典DLL解读 在Windows世界中,有无数块活动的大陆,它们都有一个共同的名字——动态链接库.现在就走进这些神奇的活动大陆,找出它们隐藏已久的秘密吧! ...
- MongoDB无法启动的解决方法
http://dmyz.org/archives/423 遇到MongoDB突然无法启动,第一反应是删除mongod.lock.这个文件在MongoDB的数据库目录下,默认是/data/db.这是最常 ...
- Android 支付宝接入时常见的问题
1.概述 首先说明下,Android支付宝接入用的是快捷支付,下载地址是https://b.alipay.com/order/techService.htm 支付宝移动接入地址https://b ...
- 引用jquery框架后出错
问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...
- Python核心编程读笔 10:函数和函数式编程
第11章 函数和函数式编程 一 调用函数 1 关键字参数 def foo(x): foo_suite # presumably does some processing with 'x' 标准调用 ...
- EC读书笔记系列之4:条款8 别让异常逃离析构函数
条款8 别让异常逃离析构函数 记住: ★析构函数绝对不要吐出异常.若一个被析构函数调用的函数可能抛出异常,析构函数应该捕捉任何异常,然后吞下它们(不传播)或结束程序. ★若客户需对某个操作函数运行期间 ...
- 调整 CComboBox 控件的下拉列表的高度
CComboBox 控件的下拉列表的高度默认很小,很难看.网上查来查去终于发现如何设置. 很巧妙,要在设计视图上单击下拉列表的小箭头.这时会发现出来的边框和点其它的位置是不同的. 这个高度就是下拉列表 ...
- php的页面缓存练习
<?php /* * 自定义页面缓存类 */ namespace page_cache; class Page { public $CacheRoot = "pageCache/&qu ...