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的区别,都是很模糊的一个介绍,所以自己总结下这些区别以及一些重点内容.很多文章在描述这些区别的时候,都 ...
随机推荐
- 10-EasyNetQ之控制队列名称
EasyNetQ默认行为,当生成队列的名称时,使用消息类型名+subscription Id.例如:PartyInvitation 这个消息类型,命名空间为 EasyNetQ.Tests.Integr ...
- jenkins 学习记录1
主题 以前自己做些小玩意儿比如博客(http://blogv3.labofjet.com/)的时候,在远程服务器上的tomcat发布工程用的是目录的结构,而不是war.原因很简单.用目录结构的话每次只 ...
- Hadoop IO 特性详解（2）
(本文引用了microheart,ggjucheng的一些资料,在此感谢.charles觉得知识无价,开源共享无价) 这一次我们接着分析文件IO校验的相关代码,看看最底层是如何实现这种大数据集的文件校 ...
- java基础之多线程三：多线程并发同步
由于线程的执行是CPU随机调度的,比如我们开启10个线程,这10个线程并不是同时执行的,而是CPU快速的在这10个线程之间切换执行,由于切换速度极快使我们感觉同时执行罢了. 线程同步问题往往发生在多个 ...
- 【bzoj1056】排名系统
1056: [HAOI2008]排名系统 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2195 Solved: 623[Submit][Statu ...
- libevent源码分析
这两天没事,看了一下Memcached和libevent的源码,做个小总结. 1.入门 1.1.概述Libevent是一个用于开发可扩展性网络服务器的基于事件驱动(event-driven)模型的网络 ...
- servlet01 项目demo、servlet生命周期
1 环境说明 jdk: 1.8 tomcat: 8.0 2 项目demo 2.1 新建一个动态的web项目 2.2 新建一个servlet类 该类必须继承 HttpServlet 技巧01:Htt ...
- 448. Find All Numbers Disappeared in an Array 寻找有界数组[1,n]中的缺失数
［抄题］: Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice ...
- Luogu 4198 楼房重建
BZOJ 2957 挺妙的题. 先把题目中的要求转化为斜率,一个点$(x, y)$可以看成$\frac{y}{x}$,这样子我们要求的就变成了一个区间内一定包含第一个值的最长上升序列. 然后把这个序列 ...
- python字符串大小写转换
str = "www.w3cSChool.cn"print(str.upper()) # 把所有字符中的小写字母转换成大写字母print(str.lower()) # 把所有字符中 ...