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 ...
随机推荐
- 任意给定一个正整数N,求一个最小的正整数M(M>1),使得N*M的十进制表示形式里只含有1和0。
题目:任意给定一个正整数N,求一个最小的正整数M(M>1),使得N*M的十进制表示形式里只含有1和0. 解法一:暴力求解.从1开始查找M,然后判断M*N=X这个数字是否只含有0,1. 解法二:由 ...
- DIV以及图片水平垂直居中兼容多种浏览器
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈 第一种:全CSS控制 ...
- php mysql_insert_id() 获取为空
mysql_insert_id() 获取插入数据后的最新的id 遇到问题和解决的步骤如下: 1. 使用后总是返回空的字符串,网上查了一番有人说是id要AUTO_INCREMENT,并且mysql_in ...
- Description:一根高筋拉面,中间切一刀,可以得到2根面条。如果先对折1次,中间切一刀,可以得到3根面条。如果连续对折2次,中间切一刀,可以得到5根面条。Input:你的程序需要解决的问题是,输入连续对折的次数。NOutput输出中间切一刀,可以得到多少根面条。
#include<iostream> using namespace std ; int main() { int n ; while(cin >> n) { << ...
- MyIsam与InnoDB主要区别
MyIsam与InnoDB主要有以下4点大的区别,缓存机制,事物支持,锁定实现,数据物理存储方式(包括索引和数据). 1.缓存机制 myisam 仅仅缓存索引,不会缓存实际数据信息,他会将这一工作交给 ...
- jQuery1.9.1针对checkbox的调整
在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下: 判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态: $('#che ...
- -webkit-filter是神马?
这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它. 现在规范中支持的效果有: - grayscale ...
- jquery 选择器之children与find
children()和find() 两个用于向下遍历 DOM 树的 jQuery 方法 children() 方法返回被选元素的所有直接子元素. find() 方法返回被选元素的后代元素,一路向下直到 ...
- hdu 5637 Transform 最短路
题目链接 异或的性质. 求s到t的最少步骤, 等价于求0到s^t的最少步骤. 通过最少的步骤达到s^t的状态, 等价于求0到s^t的最短路. 先将最短路求出来然后O(1)查询. #include &l ...
- codeforces 13E . Holes 分块
题目链接 nextt数组表示这个位置的下一个位置. cnt数组表示这个位置 i 到nextt[i]可以弹几次. end[i] 表示在从 i 弹出去的情况下, 最后一个位置是哪里. 然后就看代码吧. # ...