JS的innerText和innerHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn1').onclick = function () {
//把内容以纯文本的形式写入到层中
document.getElementById('dv').innerText = '<font face="全新硬笔行书简" color="red">这是层</font>';
};
document.getElementById('btn2').onclick = function () {
//以html标签的效果展示
document.getElementById('dv').innerHTML = '<font face="全新硬笔行书简" color="red">这是层</font>';
};
//=====================================================================
document.getElementById('btn3').onclick = function () {
//把元素中的(显示的)内容以文本的方式展示出来
alert(document.getElementById('dv').innerText);
};
document.getElementById('btn4').onclick = function () {
//把元素中的html形式展示出来
alert(document.getElementById('dv').innerHTML);
};
document.getElementById('btn5').onclick = function () {
//IE设置纯文本用innerText,火狐用的是textContent
// document.getElementById('dv').textContent = '<a href="http://www.baidu.com">百度</a>';
//能力检测
if (typeof(document.getElementById('dv').innerText)=='string') {
document.getElementById('dv').innerText = '<font face="全新硬笔行书简" color="red">这是层</font>';
} else {
document.getElementById('dv').textContent = '<a href="http://www.baidu.com">百度</a>';
}
};
};
</script>
</head>
<body>
<input type="button" name="name" value="设置innerText" id="btn1" />
<input type="button" name="name" value="设置innerHTML" id="btn2" />
<input type="button" name="name" value="显示innerText" id="btn3" />
<input type="button" name="name" value="显示innerHTML" id="btn4" />
<input type="button" name="name" value="设置textContent(火狐)" id="btn5" />
<div id="dv" style=" width:350px; height:250px; border:1px solid red;">
</div>
</body>
</html>
最新文章
- 架构师养成记--10.master-worker模式
- Python 绘制图表之我见 ---一个java程序员的看法
- IE6中使用通用选择器模拟子选择器效果
- NEC学习 ---- 模块 - 带点文字链接列表
- Android IOS WebRTC 音视频开发总结(四一)-- QQ和webrtc打洞能力pk
- 深入理解Windows X64调试
- MyBatis学习总结_11_MyBatis动态Sql语句
- ASP.NET得到系统相关信息
- 读书笔记之 - javascript 设计模式 - 命令模式
- spring beans源码解读之--BeanFactory进化史
- DropdownList控件绑定数据源显示system.data.datarowview的问题
- 201521123040《Java程序设计》第7周学习总结
- C++实现最小堆及插入,调整顺序,删除堆顶元素的操作
- Docker Swarm Mode 学习笔记(聊聊 replicas)
- websocket+rabbitMQ
- ";hello,world";———C++入门有感
- 【前端开发工具】WijmoJS 2018 v3 正式发布,全面支持Angular7
- JS频率控制函数
- MT【172】内外圆
- Mock 模拟测试简介及 Mockito 使用入门
热门文章
- Android多线程研究(5)——线程之间共享数据
- php 模拟get提交
- Java工具类:给程序增加版权信息
- 【34.88%】【codeforces 569C】Primes or Palindromes?
- [Compose] 11. Use Task for Asynchronous Actions
- OpenCV编译步骤
- ArcEngine 图层标注 (根据字段、角度)
- 数据库使用truncate清理非常多表时碰到外键约束时怎么高速解决
- nopCommerce 3.9 接口笔记
- [GeekBand] C++ 基础知识一 ——通过引用传递数组