js innerText、textContent、innerHTML的区别和各自用法
//自定义函数
function my$(id) {
return document.getElementById(id);
}
//点击按钮设置div中的文本内容
my$("btn").onclick = function () {
//设置标签中间的文本内容,应该使用textContent属性
my$("dv").innerText = "啊,这是div";
/* my$("dv").textContent="this is div标签"; */ //获取标签中间的文本内容
console.log(my$("dv").innerText);
/* console.log(my$("dv").textContent); */
};
//兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
} //获取任意标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
<style>
div {
width: 200px;
height: 150px;
border: 2px solid red;
}
</style>
</head>
<body> <input type="button" value="设置值" id="btn"/>
<div id="dv">哦,太神奇了</div> <script src="common.js">
function my$(id) {
return document.getElementById(id);
}
</script>
<script>
/* 设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持 如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
判断这个属性的类型 是不是undefined,就知道浏览器是否支持 */ //兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
} //获取任意标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
} //测试 my$("btn").onclick=function () {
console.log(getInnerText(my$("dv")));
/* setInnerText(my$("dv"),"哈哈,我又变帅了"); */
}; //自定义函数
function my$(id) {
return document.getElementById(id);
}
//点击按钮设置div中的文本内容
my$("btn").onclick = function () {
//设置标签中间的文本内容,应该使用textContent属性
my$("dv").innerText = "啊,这是div";
/* my$("dv").textContent="this is div标签"; */ //获取标签中间的文本内容
console.log(my$("dv").innerText);
/* console.log(my$("dv").textContent); */
}; </script>
</body>
</html>
js innerText、textContent、innerHTML的区别和各自用法的更多相关文章
- innerText与innerHTML的区别
innerText与innerHTML的区别:1.innerText将所有文本内容作为普通的文本2.innerHTML会识别文本内容中是否含有html标签,它能够把html标签的效果显示出来3.inn ...
- innerText和innerHTML的区别
innerhtml用法 innertext用法 以及innerHTML与innertext的区别,看完这个大家以后在实际应用中,就可以选择合适的方法.尽可能的考虑到兼容性. test.innerHTM ...
- innerText 与 innerHtml的区别
j基本语法类似: innerHTML/innerText ->给除了表单元素的标签赋值内容 document.getElementById("div1").innerHTML ...
- JavaScript中innerText和innerHTML的区别
案例 <html> <head> <meta http-equiv="Content-Type" content="text/html;ch ...
- js instanceof和typeof的区别及简单用法
js中判断一个变量的类型,通常的做法是用typeof方法,看它返回的是 什么,但是对于数组和对象它返回的都是object,ECMAScript引入了java中的instanceof 方法来弥补这一缺陷 ...
- innerHtml innerText textContent兼容性问题
innerHtml,innerText,textContentinnerHtml获取元素带标签的内容:innerText只获取元素的文本:火狐不支持innerText,支持textContent: / ...
- JS中innerHTML 和innerText和value的区别
(1)innerHTML 和innerText和value的区别: innerHTML innerText是对非表单元素进行操作的. value是对表单元素进行操作的. (2)innerHTML 和i ...
- js中的innerHTML，innerText，value的区别
首先先说一下 我自己认为的 innerHTML,innerText,value的区别 innerHTML 是在控件中加html代码 就是设置一个元素里面的HTML eg: <html> & ...
- innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
今天看了很多文章关于innerHTML.outerHTML.innerText.outerText的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...
随机推荐
- git用法小结(1)--建立远程仓库
最近一直在学习使用git来管理自己的程序,总是今天东学一点,明天西凑一点,到用的时候,总是有些茫然不知所措. 在博客园里看见一篇老好的文章,教我们做笔记啦,但是做完笔记还是要记得总结哦! 来吧,让我们 ...
- 转 -ALSA 配置
原文地址:-ALSA 配置">转 -ALSA 配置作者:超级大苹果 alsa 音频路径的问题: 在sound/soc/codecs目录中有很多音频codec的codec驱动,我使用的是 ...
- Uboot详细解析2
1.第二阶段的主线函数位于u-boot-2010.06/arch/arm/lib/board.c. 第二阶段的功能: <1> 初始化本阶段要使用到的硬件设备. 设置时钟.初始化串口. bo ...
- FPGA和CPLD的比较
1 FPGA的集成度比CPLD高,具有更复杂的布线结构和逻辑实现. 2 CPLD更适合触发器有限而乘积丰富的结构,更适合完成复杂的组合逻辑:FPGA更适合于触发器丰富的结构,适合完成时序逻辑. 3 c ...
- JVM 对象状态判断01
1 引用计数法 给一个对象添加一个引用计数器,每当有一个地方引用时,计数器加1,当引用失效的时候,计数器减去1.当计数器为0的时候,表示对象不可能再被使用.此时表明该对象可以被回收. ...
- Leetcode:Longest Palindromic Substring分析和实现
问题大意是在给定字符串中查找最长的回文子串,所谓的回文就是依据中间位置对称的字符串,比如abba,aba都是回文. 这个问题初一看,非常简单,但是会很快发现那些简单的思路都会带来O(n^3)级别的时间 ...
- 【bzoj1787】[Ahoi2008]Meet 紧急集合
1787: [Ahoi2008]Meet 紧急集合 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 2466 Solved: 1117[Submit] ...
- c++ 多态问题（在虚函数里调用虚函数）
最近在看cocos2d-x的源码,非常感激cocos2d作者的开源精神.在看代码的过程中感觉两个方向让我受益,1.把之前从书中看到的c++知识,明白了怎么运用.2.学习作者驾驭代码的巧妙方法. 看co ...
- mysql导入导出文本文件
MySQL导入出文本文件只能到处数据,不能到处结构,不过也算备份数据一种方法. 导入文本文件 在此像导入csv文件 也是类似 load data local infile 'd:/insert.txt ...
- what is diff. b/w app state & session state
Application state is a data repository available to all classes in an ASP.NET application. Applicati ...