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 ...
随机推荐
- ChartControl一个小Demo
我X轴设置的是时间,类型是DatetimeY轴设置的是数量,类型是Numerical当日期不一样时显示曲线正常,但是如果是同一天的话就成了下面的效果 怎么做才能让全部是同一天的时候显示小时为单位的曲线 ...
- bootstrap-js(4)标签页
实例 标签页(Tab)在 Bootstrap 导航元素 一章中介绍过.通过结合一些 data 属性,您可以轻松地创建一个标签页界面. 通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜 ...
- asp.net预览图片
Aspx code <table> <tr> <td class="style3"> <asp:Label ID="Label1 ...
- Javascript 常用
第一步,实现百度输入法的页面布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- ORA-600[kcratr_scan_lastbwr]逻辑坏块解决
数据库版本: 11.2.0.3 问题现象: 今天在启动一台测试数据库的时候,发现db不能open,报错如下: ERROR at line 1: ORA-00600: internal error co ...
- 创建SDE表空间
创建空间数据存储类型为ST_Geometry的要素类有2种方法:1)使用SDE创建要素类从9.3 开始,默认创建的要素类都使用ST_Geometry存储空间数据,9.3 版本之前,可以通过配置dbtu ...
- TCP/IP的三次握手协议
关于TCP/IP的三次握手协议,这篇文章中有详细的介绍,很通俗易懂,什么时候忘了,都可以过来瞧两眼,保证很快就明白了. 首先TCP/IP协议分为三个阶段:建立连接(握手阶段),数据传输阶段,连接终止阶 ...
- leetcode 3Sum Closest python
class Solution(object): def threeSumClosest(self, nums, target): """ :type nums: List ...
- php的模板引擎
设计一个交互式的网站,我们需要关注两个主要的问题:分别是图形用户界面和业务逻辑.例如,一个标准的web开发小组由两三个美工和三个程序员组成,则设计流程是:美工设计者制作了项目的网站的界面模板,然后把它 ...
- 省去路由器,Windows 7 也能做无线AP
电脑越来越白菜了,很多朋友家里已经有不少于二台电脑了.比方说一台笔记本一台台试机,哪么上网和联机的问题,随之而来了,二台电脑很多人可能会去买一个路由器,事实上,如果你其中一台有二个网卡一个有线一个无线 ...