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. instance variables may not be placed in categories

    Avoid Properties in Categories Objective-C分类中是不允许增加成员变量的(Instance variables may not be placed in cat ...

  2. Cow Sorting(置换群)

    Cow Sorting Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6664   Accepted: 2602 Descr ...

  3. dev gridcontrol 单箱效果

    private void gridView1_CellValueChanging(object sender, DevExpress.XtraGrid.Views.Base.CellValueChan ...

  4. HTML5 元素拖放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Android之ActionBar学习

    关于那个问题:是关于如何生成如下图所示之ActionBar效果: 其实就在官网上就有答案,自己疏忽再加上资料繁多.寻了许久,经过指点.终于找到: To enable split action bar, ...

  6. 打造 通用的 支持多数据库 操作的 DBHelper

    闲来无事,写一个通用的直持多数据库的DBHelper,支持单连接批量执行SQL 因为用了TransactionScope所以请引用System.TransactionScope.dll 代码尚未测试, ...

  7. caret彻底的理解css的三角形【通过border】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. C++_关键字

    const static extern 限制-对象隐式类型转换

  9. eclipse中安装svn插件实现版本控制

    打开eclipse -> Help ->Install New Software选项, 点击Add按钮 根据需要,添加自己需要的版本svn控制器的版本,填写name和url,点击ok. N ...

  10. 从C++strStr到字符串匹配算法

    字符串的匹配先定义两个名词:模式串和文本串.我们的任务就是在文本串中找到模式串第一次出现的位置,如果找到就返回位置的下标,如果没有找到返回-1.其实这就是C++语言里面的一个函数: extern ch ...